Navbar

Link

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/navbar

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

buttonsheet

Manual installation

Install the dependencies, then copy the component source into your project.

npm install react-aria-components motion @heroicons/react cn

Anatomy

import { IconChevronsY } from "@heroicons/react"
import { Button } from "@/components/ui/button"
import { Menu, MenuShortcut, MenuHeader, MenuItem, MenuSection, MenuSeparator, MenuLabel, MenuDescription, MenuSubMenu, MenuTrigger } from "@/components/ui/menu"
import {
  Navbar,
  NavbarGap,
  NavbarInset,
  NavbarItem,
  NavbarMobile,
  NavbarProvider,
  NavbarSection,
  NavbarSeparator,
  NavbarSpacer,
  NavbarStart,
  NavbarTrigger,
} from "@/components/ui/navbar"
<NavbarProvider>
  {/* Desktop */}
  <Navbar>
    <NavbarStart />
    <NavbarSection>
      <NavbarItem href="#" />
      <NavbarSpacer />
      <NavbarGap />
      <NavbarSeparator />
      <MenuTrigger>
        <NavbarItem>
          Account
          <IconChevronsY className="col-start-3" />
        </NavbarItem>
        <Menu>
          <MenuItem />
        </Menu>
      </MenuTrigger>
    </NavbarSection>
  </Navbar>

  {/* Mobile */}
  <NavbarMobile>
    <NavbarTrigger />
    <NavbarSpacer />
    <Button />
    <MenuTrigger>
      <NavbarItem>
        Account
        <IconChevronsY className="col-start-3" />
      </NavbarItem>
      <Menu>
        <MenuItem />
      </Menu>
    </MenuTrigger>
  </NavbarMobile>

  {/* Required when setting the navbar intent to 'inset' */}
  <NavbarInset />
</NavbarProvider>

Examples

Intent

The navbar supports three intents: default, float, and inset.

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 the main content. See Navbar 03.

<Navbar intent="inset" />

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>
  <MenuTrigger>
    <NavbarItem>
      Categories
      <ChevronDownIcon className="col-start-2" />
    </NavbarItem>
    <Menu className="min-w-(--trigger-width) sm:min-w-56" items={categories}>
      {(item) => (
        <MenuItem id={item.id} textValue={item.label} href={item.url}>
          {item.label}
        </MenuItem>
      )}
    </Menu>
  </MenuTrigger>
</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>
  <ChevronDownIcon 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 inside a Sheet to display navigation on small screens.

<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

Wrap your page content with the navbar layout. The examples below show standalone, Inertia.js, and Next.js usage.

Common usage

Wrap the page content with the layout component:

<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.

Loading source code...

Next.js

For Next.js, render the page within the layout:

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

Component API

Navbar

Navbar extends the native <div> element.

classNamestring
intentIntent
Default: default
isStickytrue
placementPlacement
Default: top
sideSide
Default: left

NavbarGap

NavbarGap extends the native <div> element.

classNamestring

NavbarInset

NavbarInset extends the native <div> element.

classNamestring

NavbarItem

NavbarItem extends the Intent UI <Link> component.

classNamestring
isCurrentboolean

NavbarLabel

NavbarLabel extends the native <span> element.

classNamestring

NavbarMobile

NavbarMobile extends the native <div> element.

classNamestring

NavbarProvider

NavbarProvider extends the native <div> element.

classNamestring
defaultOpenboolean
Default: false
isOpenboolean
onOpenChange(open: boolean) => void

NavbarSection

NavbarSection extends the native <div> element.

classNamestring

NavbarSeparator

NavbarSeparator extends the Intent UI <Separator> component.

classNamestring

NavbarSpacer

NavbarSpacer extends the native <div> element.

classNamestring

NavbarStart

NavbarStart extends the native <div> element.

classNamestring

NavbarTrigger

NavbarTrigger extends the Intent UI <Button> component.

classNamestring
Design
Container
Sidebar