Nav

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

Default

tsx

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

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

Tabs

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

tsx

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

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

Underline

The underline variant underlines the active link.

tsx

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

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

Colors

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

tsx

import { Nav, NavItem, NavLink } 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">
          <NavItem>
            <NavLink href="#" active>
              Active
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="#">Link</NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="#">Link</NavLink>
          </NavItem>
        </Nav>
      ))}
    </div>
  );
}

Active

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

tsx

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

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

Disabled

The disabled prop on NavLink mutes the link and stops interaction.

tsx

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

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

API Reference

Nav

Prop	Type	Default	Description
variant	`"default" \| "underline" \| "tabs"`	`"default"`	Line style of the nav.
color	`"default" \| "primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "neutral"`	`"default"`	Color theme of the nav surface.
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

NavLink

Prop	Type	Default	Description
active	`boolean`	`false`	Mark the link as the active one.
disabled	`boolean`	`false`	Mute the link and disable interaction.
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

NavItem

NavItem is a layout wrapper that accepts only asChild and 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.

PreviousList Group NextNavbar