Skip to content
MIZU.

SideNav

Grouped destinations with the current place held in focus.

Live — this one is real

Usage

import { SideNav } from "mizu-ui";

export function Example() {
  return (
    <SideNav
      currentPath="/components"
      groups={[
        {
          label: "Discover",
          items: [
            { label: "Collection", href: "/components" },
            { label: "Getting started", href: "/components/getting-started" },
          ],
        },
        {
          label: "Experiment",
          items: [
            { label: "Lab", href: "/lab" },
            { label: "Studio", href: "/studio" },
          ],
        },
      ]}
    />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect navigation/Navigation.tsx

Source is included in the npm package under src/navigation/Navigation.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
groups{label: string; items: NavigationItem[]}[]—Named groups with native links.
currentPathstring—Exact href of the current page.
labelstring—Navigation landmark.

Accessibility

Real anchors and aria-current page. Decorative icons are hidden; link labels stay visible.

Motion

CSS transitions explain state changes. Reduced motion removes travel.

Works alongside

BreadcrumbsPaginationStepperAnchorNav