Nav

A styled navigation list of links with active and disabled states.

Default

tsx

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

export default function NavDefault() {
  return (
    <Nav>
      <Nav.Item>
        <Nav.Link href="#" active>
          Active
        </Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link href="#">Link</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link href="#">Link</Nav.Link>
      </Nav.Item>
    </Nav>
  );
}

Tabs

The tabs variant renders the links as a bordered tab bar.

tsx

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

export default function NavTabs() {
  return (
    <Nav variant="tabs">
      <Nav.Item>
        <Nav.Link href="#" active>
          Active
        </Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link href="#">Link</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link href="#">Link</Nav.Link>
      </Nav.Item>
    </Nav>
  );
}

Underline

The underline variant underlines the active link.

tsx

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

export default function NavUnderline() {
  return (
    <Nav variant="underline">
      <Nav.Item>
        <Nav.Link href="#" active>
          Active
        </Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link href="#">Link</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link href="#">Link</Nav.Link>
      </Nav.Item>
    </Nav>
  );
}

Colors

The color prop themes the whole nav surface with primary, secondary, info, success, warning, danger, or neutral.

tsx

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

export default function NavColors() {
  return (
    <div className="flex flex-col gap-3">
      {(
        [
          "primary",
          "secondary",
          "info",
          "success",
          "warning",
          "danger",
          "neutral",
        ] as const
      ).map((color) => (
        <Nav key={color} color={color} className="rounded-lg p-1">
          <Nav.Item>
            <Nav.Link href="#" active>
              Active
            </Nav.Link>
          </Nav.Item>
          <Nav.Item>
            <Nav.Link href="#">Link</Nav.Link>
          </Nav.Item>
          <Nav.Item>
            <Nav.Link href="#">Link</Nav.Link>
          </Nav.Item>
        </Nav>
      ))}
    </div>
  );
}

Active

The active prop on Nav.Link marks the current link and sets aria-current="page".

tsx

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

export default function NavActive() {
  return (
    <Nav>
      <Nav.Item>
        <Nav.Link href="#">Overview</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link href="#" active>
          Settings
        </Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link href="#">Billing</Nav.Link>
      </Nav.Item>
    </Nav>
  );
}

Disabled

The disabled prop on Nav.Link mutes the link and stops interaction.

tsx

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

export default function NavDisabled() {
  return (
    <Nav>
      <Nav.Item>
        <Nav.Link href="#" active>
          Active
        </Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link href="#">Link</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link href="#" disabled>
          Disabled
        </Nav.Link>
      </Nav.Item>
    </Nav>
  );
}

API Reference

Nav

Prop	Type	Default
`variant`	`"default" \| "underline" \| "tabs"`	`"default"`
`color`	`"default" \| "primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "neutral"`	`"default"`
`asChild`	`boolean`	`false`
`className`	`string`	—

Nav.Link

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

Nav.Item

Nav.Item is a layout wrapper that accepts only className.

Styling

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

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

PreviousLoader NextNavbar