Navbar

Basic

A navbar provides a variety of actions or options for users to select.

Installation

Composed components

Manual installation

Anatomy

Intent

There are three types of intents: navbar, floating, and inset, each with distinct behaviors.

Default

The default intent for the Navbar is "default". You can customize the appearance by setting the intent prop to "float" or "inset".

<Navbar />

Float

The "float" intent places a border inside the navbar and adds padding around the container. It’s useful when you want the navbar to appear visually distinct from the page layout. Live example can be found here at Navbar 02.

<Navbar intent="float" />

Inset

The "inset" intent adds horizontal padding to align the navbar with your main content. You can see it in action in the demo, or view a live example here.

<Navbar intent="inset" />

Logo

The logo is typically the first item in the navbar, usually representing the brand or company.

<NavbarProvider>
  <Navbar>
    <NavbarStart>
      <Link href="#">
        <IconBrandApple className="size-5" />
      </Link>
    </NavbarStart>
    <NavbarSection>
      <NavbarItem href="#">Store</NavbarItem>

Current

Highlight the active page by setting isCurrent to true on the relevant NavbarItem.

<NavbarItem isCurrent href="#" />

Sticky

Make the navbar stick to the top of the page by enabling the isSticky prop.

<Navbar isSticky />

Using Icons

When using icons inside NavbarItem, include NavbarLabel to keep everything aligned and accessible.

<NavbarItem>
  <IconHashtag />
  <NavbarLabel>Categories</NavbarLabel>
</NavbarItem>

Dropdown

To use a dropdown inside the navbar, use the Menu component. If you want a chevron icon on the right, set the correct column start.

If there’s an icon on the left, use col-start-3. If there’s no icon, use col-start-2.

<NavbarSection>
  <NavbarItem href="#">
    Home
  </NavbarItem>
  <Menu>
    <NavbarItem>
      Categories
      <IconChevronLgDown className="col-start-2" />
    </NavbarItem>
    <Menu.Content className="min-w-(--trigger-width) sm:min-w-56" items={categories}>
      {(item) => (
        <Menu.Item id={item.id} textValue={item.label} href={item.url}>
          {item.label}
        </Menu.Item>
      )}
    </Menu.Content>
  </Menu>
</NavbarSection>

When using an icon on the left, wrap the text in NavbarLabel and place the chevron using col-start-3.

<NavbarItem>
  <IconHashtag />
  <NavbarLabel>Categories</NavbarLabel>
  <IconChevronLgDown className="col-start-3" />
</NavbarItem>

Spacer

Use NavbarSpacer to push items apart. This is especially useful for layouts where you want content (like a logo) on the left and actions (like buttons) on the right.

<Navbar>
  <NavbarStart />
  <NavbarSpacer />
  <NavbarSection>
    {/* items */}
  </NavbarSection>
</Navbar>

Gap

Use NavbarGap to control the spacing between navigation items. This gives you precise control over layout density.

<Navbar>
  <NavbarStart />
  <NavbarGap />
  <NavbarSection />
  <NavbarSpacer />
  <NavbarSection>
    {/* items */}
  </NavbarSection>
</Navbar>

Separator

NavbarSeparator adds a vertical divider between items. It’s useful for grouping or visually separating actions in the navbar.

<NavbarTrigger />
<NavbarSpacer />
<Button intent="plain" size="sq-sm" aria-label="Search for products">
  <IconSearch />
</Button>
<NavbarSeparator className="mr-2.5" />
<UserMenu />

Responsive

Use NavbarMobile to create a responsive navbar experience. It works inside a Sheet and is perfect for mobile-friendly navigation.

<NavbarProvider>
  <Navbar>
    {/* your desktop items */}
  </Navbar>
  <NavbarMobile>
    <NavbarTrigger />
    <NavbarSpacer />
    <Button intent="plain" size="sq-sm" aria-label="Search for products">
      <IconSearch />
    </Button>
    <NavbarSeparator className="mr-2.5" />
    <UserMenu />
  </NavbarMobile>
</NavbarProvider>

Using the Layout

There are several ways to use the layout, depending on your framework. Or, if you're not using any framework, you can simply apply the layout component.

Common Usage

A typical approach is to wrap your content with the layout like this:

<AppLayout>
  {/* your main content */}
</AppLayout>

Inertia.js

If you're using Inertia.js, you can implement a persistent layout. Here's how it looks:

Home.layout = (page: React.ReactNode) => <AppLayout children={page} />

When using Inertia.js with Laravel, the layout, components, and pages files are typically located in the resources/js folder. All the examples below assume they are within this directory.

Next.js

If you're using Next.js, there's no extra configuration needed. Simply create a page component and ensure it inherits the layout like this:

app/
├── app-navbar.tsx
├── layout.tsx
└── page.tsx