Density

PageNavigation

PageNavigation renders semantic page or app navigation with native nav, anchor, and button elements. Use it for product sections, dashboards, and sidebar menus. Use PageTabs instead for document-style tab strips.

import { Badge, PageNavigation } from "density-base-ui";
import { useState } from "react";

const items = [
  { id: "overview", label: "Overview" },
  { id: "services", label: "Services" },
  { id: "alerts", label: "Alerts", childrenEnd: <Badge>3</Badge> },
  {
    id: "settings",
    label: "Settings",
    href: "/docs/components/page-navigation",
  },
];

export default function PageNavigationExample() {
  const [activeId, setActiveId] = useState("overview");

  return (
    <PageNavigation
      activeId={activeId}
      aria-label="Product navigation"
      items={items}
      onActiveIdChange={setActiveId}
    />
  );
}

Props

Prop Attribute Values Default
items None { id, label, href?, disabled?, childrenStart?, childrenEnd? }[] Required
activeId None string Required
onActiveIdChange None (id) => void None
orientation data-dn-orientation horizontal, vertical horizontal
depth data-dn-depth 1, 2, 3, 4, 5, 6, 7 1
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Other native nav props Mixed HTMLAttributes<HTMLElement> None

Items with href render anchors and preserve normal link navigation while notifying onActiveIdChange. Items without href render buttons for in-page navigation. The active item uses the selected secondary button treatment; its selected state remains separate from hover, active, and keyboard focus.

Vertical navigation

import { Badge, PageNavigation } from "density-base-ui";
import { useState } from "react";

const items = [
  { id: "traffic", label: "Traffic", childrenStart: "T" },
  { id: "latency", label: "Latency", childrenStart: "L" },
  {
    id: "errors",
    label: "Errors",
    childrenStart: "E",
    childrenEnd: <Badge>2</Badge>,
  },
  { id: "capacity", label: "Capacity", childrenStart: "C" },
];

export default function PageNavigationVerticalExample() {
  const [activeId, setActiveId] = useState("traffic");

  return (
    <PageNavigation
      activeId={activeId}
      aria-label="Metrics navigation"
      items={items}
      onActiveIdChange={setActiveId}
      orientation="vertical"
      style={{ maxWidth: "14rem" }}
    />
  );
}