AG Design System

Component

Top Navigation

Sticky top navigation bar with brand, breadcrumb trail, and right-aligned action area.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/top-nav

Usage

Use the top nav as the global header in application shells. Pair with a side nav for deep hierarchies.

Composition

Breadcrumb

Playground

Preview
AG Design

Configure

Yes

Show the brand logo and name in the top nav.

Yes

Show the search input in the top nav actions area.

Yes

Show the breadcrumb trail in the top nav.

Show a single current page or a three-level trail.

First breadcrumb label in a three-level trail.

Middle breadcrumb label in a three-level trail.

Current page label in a three-level trail.

Code

<TopNav>
  <TopNavBrand>
    <span className="size-5 rounded-sm bg-primary" />
    AG Design
  </TopNavBrand>
  <TopNavBreadcrumb
    items={[
      { label: "Home", href: "/" },
      { label: "Components", href: "/components" },
      { label: "Button" },
    ]}
  />
  <TopNavActions />
</TopNav>

Variants & States

Supported variants, sizes, and interaction states for this component.

Configurations

  • Full header (logo, search, breadcrumbs)
  • Minimal

Do

  • Keep the brand area minimal, logo or name only
  • Use the breadcrumb to orient users within the app hierarchy

Don't

  • Don't add more than 3 action buttons to the right slot
  • Don't use the top nav for marketing pages, use a dedicated site header