Component

Top Navigation

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

Usage

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

Playground

Preview

North Star

Configure

Logo

Yes

Show the brand logo and name in the top nav.

Search bar

Yes

Show the search input in the top nav actions area.

Breadcrumbs

Yes

Show the breadcrumb trail in the top nav.

Breadcrumb levels

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

Level 1 title

First breadcrumb label in a three-level trail.

Level 2 title

Middle breadcrumb label in a three-level trail.

Level 3 title

Current page label in a three-level trail.

Code

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

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