Navbar.

The navigational spine of the application. It handles branding, navigation links, and action items responsively, collapsing gracefully into a mobile menu when space is constrained.

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

Configuration

Composition

Viewport

State

Acme Inc.

Work

About

Services

Contact

Page Content

100% Width

brand Layout

Compositional Flexibility

The Navbar is built using a compound component pattern (`Navbar`, `NavbarBrand`, `NavbarContent`). This allows you to reorder elements or inject custom actions (like the 'Hiring' badge) without modifying the primitive's source code.

Mobile-First Collapsible

We don't use media queries to hide content. Instead, the `NavbarMenu` component sits outside the main flow and is toggled via state. This ensures accessibility and proper focus management when the menu is open.

Header.tsx

<Navbar>
  <NavbarContainer>
    <NavbarBrand>
      <Logo />
    </NavbarBrand>
    
    <NavbarContent className="hidden lg:flex">
      <Link href="/work">Work</Link>
      <Link href="/about">About</Link>
    </NavbarContent>
    
    <NavbarAction>
       <ThemeToggle />
       <NavbarMenuToggle />
    </NavbarAction>
  </NavbarContainer>
  
  <NavbarMenu>
    <NavbarMenuItem>Work</NavbarMenuItem>
  </NavbarMenu>
</Navbar>