Navbar

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

Default

The default navbar composes a Navbar.Brand and a Navbar.Nav of Nav.Links.

tsx

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

export default function NavbarDefault() {
  return (
    <Navbar expand="sm" className="bg-subtle">
      <Navbar.Brand href="#">Hummingbird</Navbar.Brand>
      <Navbar.Toggle />
      <Navbar.Collapse>
        <Navbar.Nav className="ms-auto">
          <Nav.Link href="#" active>
            Home
          </Nav.Link>
          <Nav.Link href="#">Features</Nav.Link>
          <Nav.Link href="#">Pricing</Nav.Link>
          <Nav.Link href="#" disabled>
            Disabled
          </Nav.Link>
        </Navbar.Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

Responsive collapse

Navbar.Toggle and Navbar.Collapse hide the menu behind a toggle below the expand breakpoint.

tsx

import { Navbar, Input, Button, Nav } from "@hummingbirdui/react";

export default function NavbarCollapseExample() {
  return (
    <Navbar expand="lg" className="bg-subtle">
      <Navbar.Brand href="#">Hummingbird</Navbar.Brand>
      <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>
        <Navbar.Toggle />
      </div>
      <Navbar.Collapse>
        <Navbar.Nav asChild>
          <div className="gap-2 lg:items-center w-full">
            <Nav.Link href="#" active>
              Home
            </Nav.Link>
            <Nav.Link href="#">Features</Nav.Link>
            <Nav.Link href="#">Pricing</Nav.Link>
            <Nav.Link href="#" disabled>
              Disabled
            </Nav.Link>
          </div>
        </Navbar.Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

Expand

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

tsx

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

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

Always collapsed

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

tsx

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

export default function NavbarAlwaysCollapsed() {
  return (
    <Navbar className="bg-subtle">
      <Navbar.Brand href="#">Hummingbird</Navbar.Brand>
      <Navbar.Toggle />
      <Navbar.Collapse>
        <Navbar.Nav asChild>
          <div className="gap-2">
            <Nav.Link href="#" active>
              Home
            </Nav.Link>
            <Nav.Link href="#">Features</Nav.Link>
            <Nav.Link href="#">Pricing</Nav.Link>
          </div>
        </Navbar.Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

Scrollable

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

tsx

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

export default function NavbarScrollable() {
  return (
    <Navbar expand="lg" className="bg-subtle">
      <Navbar.Brand href="#">Hummingbird</Navbar.Brand>
      <Navbar.Toggle />
      <Navbar.Collapse>
        <Navbar.Nav scrollable asChild>
          <div className="max-h-24 gap-2">
            <Nav.Link href="#" active>
              Home
            </Nav.Link>
            <Nav.Link href="#">Features</Nav.Link>
            <Nav.Link href="#">Pricing</Nav.Link>
            <Nav.Link href="#">Docs</Nav.Link>
            <Nav.Link href="#">Blog</Nav.Link>
            <Nav.Link href="#">Support</Nav.Link>
          </div>
        </Navbar.Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

With text

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

tsx

import { Navbar } from "@hummingbirdui/react";

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

Custom toggle

Passing children to Navbar.Toggle overrides the default hamburger glyph.

tsx

import { Navbar, Nav } from "@hummingbirdui/react";
import { AlignJustify } from "lucide-react";

export default function NavbarCustomToggle() {
  return (
    <Navbar className="bg-subtle">
      <Navbar.Brand href="#">Hummingbird</Navbar.Brand>
      <Navbar.Toggle className="btn btn-icon btn-sm">
        <AlignJustify className="size-5" />
      </Navbar.Toggle>
      <Navbar.Collapse>
        <Navbar.Nav asChild>
          <div className="gap-2">
            <Nav.Link href="#" active>
              Home
            </Nav.Link>
            <Nav.Link href="#">Features</Nav.Link>
            <Nav.Link href="#">Pricing</Nav.Link>
          </div>
        </Navbar.Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

API Reference

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

Prop	Type	Default
`defaultOpen`	`boolean`	—
`open`	`boolean`	—
`onOpenChange`	`function`	—
`expand`	`enum`	—
`className`	`string`	—

Navbar.Nav

Prop	Type	Default
`scrollable`	`boolean`	`false`
`asChild`	`boolean`	`false`
`className`	`string`	—

Navbar.Collapse

Navbar.Collapse wraps the Radix Collapsible content.

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	`true`
`duration`	`number`	—
`className`	`string`	—

Data attribute	Values
`[data-state]`	`"open" \| "closed"`

CSS Variable	Description
`--radix-collapsible-content-width`	The width of the content when it opens/closes. Named `collapsible` because it comes from the underlying Collapsible primitive.
`--radix-collapsible-content-height`	The height of the content when it opens/closes. Named `collapsible` because it comes from the underlying Collapsible primitive.

Navbar.Toggle

Navbar.Toggle wraps the Radix Collapsible trigger. It renders the default hamburger Navbar.TogglerIcon unless children are passed, and sets aria-label="Toggle navigation" by default.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	—

Data attribute	Values
`[data-state]`	`"open" \| "closed"`

Navbar.Brand

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	—

Navbar.Text accepts className. Navbar.TogglerIcon 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