Navbar

A responsive navigation header with a brand, links, text, and a collapsible menu.

Default

The default navbar composes a NavbarBrand and a NavbarNav of NavLinks.

tsx

import {
  Navbar,
  NavbarBrand,
  NavbarCollapse,
  NavbarNav,
  NavbarToggle,
  NavLink,
} from "@hummingbirdui/react";

export default function NavbarDefault() {
  return (
    <Navbar expand="sm" className="bg-subtle">
      <NavbarBrand href="#">Hummingbird</NavbarBrand>
      <NavbarToggle />
      <NavbarCollapse>
        <NavbarNav className="ms-auto">
          <NavLink href="#" active>
            Home
          </NavLink>
          <NavLink href="#">Features</NavLink>
          <NavLink href="#">Pricing</NavLink>
          <NavLink href="#" disabled>
            Disabled
          </NavLink>
        </NavbarNav>
      </NavbarCollapse>
    </Navbar>
  );
}

Responsive collapse

NavbarToggle and NavbarCollapse hide the menu behind a toggle below the expand breakpoint.

tsx

import {
  Navbar,
  NavbarBrand,
  NavbarToggle,
  NavbarCollapse,
  NavbarNav,
  NavLink,
  FormControl,
  Button,
} from "@hummingbirdui/react";

export default function NavbarCollapseExample() {
  return (
    <Navbar expand="lg" className="bg-subtle">
      <NavbarBrand href="#">Hummingbird</NavbarBrand>
      <div className="flex items-center lg:order-1 gap-2">
        <Button variant="text" size="sm">
          Signin
        </Button>
        <Button size="sm" className="max-sm:hidden">
          Signup
        </Button>
        <NavbarToggle />
      </div>
      <NavbarCollapse>
        <NavbarNav asChild>
          <div className="gap-2 lg:items-center w-full">
            <NavLink href="#" active>
              Home
            </NavLink>
            <NavLink href="#">Features</NavLink>
            <NavLink href="#">Pricing</NavLink>
            <NavLink href="#" disabled>
              Disabled
            </NavLink>
          </div>
        </NavbarNav>
      </NavbarCollapse>
    </Navbar>
  );
}

Expand

The expand prop controls when the navbar expands horizontally. Supported values are sm, md, lg, xl, 2xl, and always.

tsx

import { Navbar, NavbarBrand, NavbarNav, NavLink } from "@hummingbirdui/react";

export default function NavbarExpand() {
  return (
    <Navbar expand="always" className="bg-subtle">
      <NavbarBrand href="#">Hummingbird</NavbarBrand>
      <NavbarNav asChild>
        <div className="gap-2">
          <NavLink href="#" active>
            Home
          </NavLink>
          <NavLink href="#">Pricing</NavLink>
        </div>
      </NavbarNav>
    </Navbar>
  );
}

Always collapsed

Omitting expand keeps the menu behind the toggle at every width, and duration on NavbarCollapse tunes the open and close speed in milliseconds.

tsx

import {
  Navbar,
  NavbarBrand,
  NavbarToggle,
  NavbarCollapse,
  NavbarNav,
  NavLink,
} from "@hummingbirdui/react";

export default function NavbarAlwaysCollapsed() {
  return (
    <Navbar className="bg-subtle">
      <NavbarBrand href="#">Hummingbird</NavbarBrand>
      <NavbarToggle />
      <NavbarCollapse>
        <NavbarNav asChild>
          <div className="gap-2">
            <NavLink href="#" active>
              Home
            </NavLink>
            <NavLink href="#">Features</NavLink>
            <NavLink href="#">Pricing</NavLink>
          </div>
        </NavbarNav>
      </NavbarCollapse>
    </Navbar>
  );
}

Scrollable

The scrollable prop on NavbarNav constrains the list height and scrolls its overflow.

tsx

import {
  Navbar,
  NavbarBrand,
  NavbarCollapse,
  NavbarNav,
  NavbarToggle,
  NavLink,
} from "@hummingbirdui/react";

export default function NavbarScrollable() {
  return (
    <Navbar expand="lg" className="bg-subtle">
      <NavbarBrand href="#">Hummingbird</NavbarBrand>
      <NavbarToggle />
      <NavbarCollapse>
        <NavbarNav scrollable asChild>
          <div className="max-h-24 gap-2">
            <NavLink href="#" active>
              Home
            </NavLink>
            <NavLink href="#">Features</NavLink>
            <NavLink href="#">Pricing</NavLink>
            <NavLink href="#">Docs</NavLink>
            <NavLink href="#">Blog</NavLink>
            <NavLink href="#">Support</NavLink>
          </div>
        </NavbarNav>
      </NavbarCollapse>
    </Navbar>
  );
}

With text

NavbarText renders non-link content such as a signed-in label.

tsx

import { Navbar, NavbarBrand, NavbarText } from "@hummingbirdui/react";

export default function NavbarText_() {
  return (
    <Navbar expand="always" className="bg-subtle">
      <NavbarBrand href="#">Hummingbird</NavbarBrand>
      <NavbarText>
        Signed in as <strong>Mark</strong>
      </NavbarText>
    </Navbar>
  );
}

Custom toggle

Passing children to NavbarToggle overrides the default hamburger glyph.

tsx

import {
  Navbar,
  NavbarBrand,
  NavbarToggle,
  NavbarCollapse,
  NavbarNav,
  NavLink,
} from "@hummingbirdui/react";
import { AlignJustify } from "lucide-react";

export default function NavbarCustomToggle() {
  return (
    <Navbar className="bg-subtle">
      <NavbarBrand href="#">Hummingbird</NavbarBrand>
      <NavbarToggle className="btn btn-icon btn-sm">
        <AlignJustify className="size-5" />
      </NavbarToggle>
      <NavbarCollapse>
        <NavbarNav asChild>
          <div className="gap-2">
            <NavLink href="#" active>
              Home
            </NavLink>
            <NavLink href="#">Features</NavLink>
            <NavLink href="#">Pricing</NavLink>
          </div>
        </NavbarNav>
      </NavbarCollapse>
    </Navbar>
  );
}

API Reference

The navbar is built on the Collapsible primitive; open, defaultOpen, and onOpenChange are forwarded to its root.

Prop	Type	Default	Description
expand	`"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "always"`	—	Breakpoint at which the navbar lays out horizontally.
open	`boolean`	—	Controlled open state of the collapsible menu.
defaultOpen	`boolean`	—	Open state of the collapsible menu when initially rendered.
onOpenChange	`(open: boolean) => void`	—	Event handler called when the open state changes.
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

NavbarNav

Prop	Type	Default	Description
scrollable	`boolean`	`false`	Constrain the list height and scroll its overflow.
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

NavbarCollapse

NavbarCollapse wraps the Radix Collapsible content; for its shared props, see the Radix UI documentation.

Prop	Type	Default	Description
duration	`number`	—	Open and close animation duration in milliseconds.
className	`string`	—	Additional classes merged with the generated classes.

NavbarToggle

NavbarToggle wraps the Radix Collapsible trigger. For detailed usage guidelines, see the Radix UI documentation.

NavbarBrand and NavbarText

NavbarBrand and NavbarText are layout wrappers that accept only asChild and className. NavbarTogglerIcon renders the default hamburger glyph and accepts standard svg props.

Styling

Hummingbird React navbar is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available navbar classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousNav NextPagination