Navbar

Top navigation bar with a logo-agnostic brand, Button-backed links, a right-aligned actions cluster, and a responsive mobile menu.

Pro

Unlock with Pro Code

v1.0

Description

Navbar is a compound top bar: a logo-agnostic NavbarBrand, a NavbarContent link group, a right-aligned NavbarActions cluster, and — below md — a NavbarMenu panel toggled by an animated NavbarMenuToggle. NavbarLink renders a real Button under the hood, so links inherit every button variant, state, and focus style instead of a parallel set of styles.

Reach for it as the persistent chrome at the top of a marketing site or app: brand on the left, primary links in the middle, and auth or account controls on the right. "Signed-in" versus "guest" is not a prop — the brand and links are identical, so the two views differ only in what you put in NavbarActions (auth buttons for a guest; notification, search, and an account button for a signed-in user).

For hierarchical path navigation use Breadcrumb; for switching sections within a page use Tabs or TabMenu. The "Solutions" and account chevrons are decorative — wire your own DropdownMenu when a link should open a menu.

Navbar is a Create UI Pro component. With a Pro seat, npx @create-ui/cli add navbar installs it, and the previews below are marked with a Pro badge. Its vertical NavbarSeparator is built on the Pro Separator (its direction="vertical" mode), which add navbar pulls in automatically.

Installation

pnpm dlx @create-ui/cli add navbar

Anatomy

Navbar owns the mobile-menu open state and hands it to NavbarMenuToggle / NavbarMenu through context, so it is a client component. It also wires the menu's dismissal for you: Escape and an outside pointer press close it, and focus returns to the toggle. Everything to the left of NavbarActions stays the same between the guest and signed-in views.

<Navbar>
  <NavbarBrand />
  <NavbarSeparator />
  <NavbarContent>
    <NavbarLink />
  </NavbarContent>
  <NavbarActions />
  <NavbarMenu>
    <NavbarMenuItem />
  </NavbarMenu>
</Navbar>

Usage

import {
  Navbar,
  NavbarActions,
  NavbarBrand,
  NavbarContent,
  NavbarLink,
  NavbarSeparator,
} from "@/components/ui/navbar"

<Navbar bordered>
  <NavbarBrand>
    <Logo />
  </NavbarBrand>
  <NavbarSeparator />
  <NavbarContent>
    <NavbarLink href="/product" active>
      Product
    </NavbarLink>
    <NavbarLink href="/pricing">Pricing</NavbarLink>
  </NavbarContent>
  <NavbarActions>
    <Button variant="neutral-light" appearance="ghost">
      Log In
    </Button>
    <Button>Get Started</Button>
  </NavbarActions>
</Navbar>

Unlock with Pro Code

Accessibility

NavbarContent renders as a <nav aria-label="Main"> landmark. Each NavbarLink is a real <a> (or the element you pass via asChild), so it is a normal tab stop with normal link semantics; the active link gets aria-current="page".

Key	Description
`Tab`	Moves focus across brand, links, and actions in order.
`Enter`	Follows the focused link.
`Space` `Enter`	Toggles the mobile menu when `NavbarMenuToggle` is focused.
`Escape`	Closes the open mobile menu and returns focus to `NavbarMenuToggle`.

ARIA notes:

NavbarContent is the <nav aria-label="Main"> group; pass your own aria-label if a page has more than one nav landmark.
The active NavbarLink / NavbarMenuItem sets aria-current="page". Mark at most one item active.
NavbarMenuToggle sets aria-expanded, aria-controls (pointing at the NavbarMenu it opens), and an aria-label that flips between "Open menu" and "Close menu"; its animated bars are aria-hidden.
The open NavbarMenu dismisses on Escape (focus returns to the toggle) and on a pointer press outside the bar; selecting a NavbarMenuItem also closes it. Its open animation is gated behind motion-safe, so it honors prefers-reduced-motion.
Icon-only actions (notification, search, the ··· overflow) need an aria-label. A decorative brand SVG should be aria-hidden, or role="img" with an aria-label when it stands in for the brand name.
The "Solutions" and account chevrons are visual only. If a link opens a menu, wrap it in a DropdownMenu so the real menu semantics and keyboard model come along.

Styling

Tailwind override: pass className to merge Tailwind classes with the component's classes (via cn()) on any part:

<Navbar className="mx-auto max-w-6xl" />

The bar spans full width with no built-in max-width cap, so constrain it with your own wrapper or a className.

Data slots and attributes: the component sets these for CSS targeting.

data-slot="navbar" on the root <header>, data-slot="navbar-inner" on the inner flex row.
data-slot="navbar-brand" on the brand, data-slot="navbar-content" on the <nav>, data-slot="navbar-actions" on the actions cluster.
data-slot="navbar-link" on each link, data-slot="navbar-menu-toggle" on the hamburger, data-slot="navbar-menu" on the mobile panel, data-slot="navbar-menu-item" on each menu link.
data-bordered on the root when bordered is set; data-position="static" | "sticky" on the root.
data-state="open" | "closed" on the root, the toggle, and the menu, reflecting the mobile-menu state.
data-active on the active link / menu item.

Target the open menu in CSS:

[data-slot="navbar-menu"][data-state="open"] {
  /* ... */
}

TabMenu: use this for switching between sections inside a page, not for site-level navigation.
Tabs: use this when each option swaps a content panel within the same surface.
Breadcrumb: use this for hierarchical path navigation.
DropdownMenu: attach one to a NavbarLink or account button when a link should open a menu.
Separator: the primitive NavbarSeparator wraps in direction="vertical"; use it directly for the horizontal divider inside a NavbarMenu.
Button: the primitive NavbarLink and NavbarActions compose; use it directly for auth and account controls.

API Reference

The root <header>. Owns the mobile-menu open state and provides the context that NavbarMenuToggle, NavbarMenu, and NavbarMenuItem read. Extends React.ComponentProps<"header">.

Props

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state of the mobile menu. Pair with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Uncontrolled initial open state of the mobile menu.
`onOpenChange`	`(open: boolean) => void`	-	Fires with the next state when the mobile menu opens or closes.
`className`	`string`	-	Tailwind classes merged via `cn()`.
`children`	`React.ReactNode`	-	Brand, separator, content, actions, and menu parts.

Variants

Variant	Options	Default	Description
`bordered`	`boolean`	`false`	Adds a bottom hairline. Mirrored as `data-bordered`.
`position`	`"static"` `"sticky"`	`"static"`	`sticky` pins the bar to the top of its scroll container. `data-position`.

NavbarBrand

Left-aligned brand slot. Logo-agnostic — pass your own inline <svg> or <img> (plus an optional version Badge) as children. Extends React.ComponentProps<"div">.

Props

Prop	Type	Default	Description
`className`	`string`	-	Tailwind classes merged via `cn()`.
`children`	`React.ReactNode`	-	The logo, and optionally a version `Badge`.

NavbarSeparator

A vertical hairline divider that stretches to the bar height, built on the Pro Separator in direction="vertical" mode (so role="separator" / aria-orientation="vertical"). Sits between NavbarBrand and NavbarContent. Extends React.ComponentProps<"div">.

Props

Prop	Type	Default	Description
`className`	`string`	-	Tailwind classes merged via `cn()`. Add `hidden md:block` to drop it on mobile.

NavbarContent

The primary link group. Renders <nav aria-label="Main">. Extends React.ComponentProps<"nav">.

Props

Prop	Type	Default	Description
`className`	`string`	-	Tailwind classes merged via `cn()`. Add `hidden md:flex` to collapse it on mobile.
`children`	`React.ReactNode`	-	One or more `NavbarLink` children.

NavbarLink

A nav link that renders a Button under the hood, so it inherits button styling. Extends React.ComponentProps<"a">.

Props

Prop	Type	Default	Description
`href`	`string`	-	Link target.
`active`	`boolean`	`false`	Marks the current page: soft `bg-weak` look and `aria-current="page"`.
`leading`	`React.ReactNode`	-	Slot before the label (e.g. an icon).
`trailing`	`React.ReactNode`	-	Slot after the label (e.g. a chevron or a small `Badge`).
`asChild`	`boolean`	`false`	Render your element (e.g. a router `Link`) as the anchor.
`className`	`string`	-	Tailwind classes merged via `cn()`.
`children`	`React.ReactNode`	-	The link label.

NavbarActions

Right-aligned actions cluster. Owns the single ml-auto, so it always sits hard right no matter how many links precede it. Extends React.ComponentProps<"div">.

Props

Prop	Type	Default	Description
`className`	`string`	-	Tailwind classes merged via `cn()`. Pass `ml-0` to move it off the right edge.
`children`	`React.ReactNode`	-	Auth buttons, or an account cluster and a `NavbarMenuToggle`.

NavbarMenuToggle

The mobile hamburger button (an animated ☰ ↔ ✕). Reads the navbar context to toggle the menu. Extends the Button props; typically only className (e.g. md:hidden) is passed.

Props

Prop	Type	Default	Description
`onClick`	`(e: MouseEvent) => void`	-	Runs before the toggle; the menu still toggles afterward.
`className`	`string`	-	Tailwind classes merged via `cn()`. Use `md:hidden` to show it only on mobile.

NavbarMenu

The mobile menu panel. Renders below the bar and only while open and below md. Reads the navbar context. Extends React.ComponentProps<"div">.

Props

Prop	Type	Default	Description
`className`	`string`	-	Tailwind classes merged via `cn()`.
`children`	`React.ReactNode`	-	`NavbarMenuItem`s, and any composite (e.g. an icon row).

NavbarMenuItem

A full-width link inside NavbarMenu that closes the menu on click. Extends React.ComponentProps<"a">.

Props

Prop	Type	Default	Description
`href`	`string`	-	Link target.
`active`	`boolean`	`false`	Marks the current page: soft look and `aria-current="page"`.
`leading`	`React.ReactNode`	-	Slot before the label.
`trailing`	`React.ReactNode`	-	Slot after the label, pushed to the far right (e.g. a chevron).
`asChild`	`boolean`	`false`	Render your element (e.g. a router `Link`) as the anchor.
`onClick`	`(e: MouseEvent) => void`	-	Runs before the menu closes.
`className`	`string`	-	Tailwind classes merged via `cn()`.
`children`	`React.ReactNode`	-	The item label.

useNavbar

Hook that returns the navbar context: { open, setOpen, toggle }. Call it inside a Navbar to drive the mobile menu from a custom control; it throws if used outside a Navbar.

Modal Pagination