nabs-ui-navigation

Reusable navigation menu control for React.

Features

• Vertical or horizontal menu direction
• Nested navigation items up to 3 levels deep
• Expand/collapse support with controlled or uncontrolled state
• Control-level text alignment (left, center, right)
• Active and disabled states
• Optional path-based navigation (path) that updates browser URL via history
• Direct URL active selection when path matches window.location.pathname

Basic usage

import { Navigation } from "nabs-ui-navigation/Navigation";

<Navigation
  direction="vertical"
  textAlignment="left"
  activeItemId="home"
  items={[
    { id: "home", label: "Home" },
    { id: "projects", label: "Projects" },
    { id: "settings", label: "Settings" },
  ]}
  onItemSelect={(id) => console.log(id)}
/>

Path-based navigation

Use path for SPA-style path changes without full page reloads. The component updates window.history and will automatically select the matching item when the page loads directly on that path.

<Navigation
  items={[
    { id: "home", label: "Home", path: "/home" },
    { id: "components", label: "Components", path: "/components" },
    { id: "settings", label: "Settings", path: "/settings" },
  ]}
  onItemSelect={(id) => console.log(id)}
/>

Set syncActivePath={false} if you want to disable automatic active-item matching from the current browser path.

Nested items (max depth 3)

Use children to define nested navigation entries. Any level deeper than 3 is ignored.

<Navigation
  direction="vertical"
  items={[
    {
      id: "guides",
      label: "Guides",
      path: "/guides",
      children: [
        {
          id: "guides-api",
          label: "API",
          path: "/guides/api",
          children: [
            { id: "guides-api-auth", label: "Authentication", path: "/guides/api/auth" },
          ],
        },
      ],
    },
  ]}
/>

Expansion behavior

• Vertical mode: sub-items render inline as nested lists.
• Horizontal mode: sub-items render as overlay menus so content is not pushed down.

Expansion props:

• expandedItemIds (controlled)
• defaultExpandedItemIds (uncontrolled)
• onExpandedChange
• onActiveTrailChange (emits active parent-to-leaf trail for breadcrumb integration)
• autoExpandActivePath (defaults to true in vertical mode and false in horizontal mode)
• maxDepth (1, 2, or 3; defaults to 3)

When a path-matched item is active in vertical mode, ancestors auto-expand by default.

Breadcrumb integration

Use onActiveTrailChange to drive a breadcrumb component:

const [trail, setTrail] = useState([]);

<Navigation items={items} onActiveTrailChange={setTrail} />
<Breadcrumb showHome home={{ label: "Home", path: "/" }} items={trail} />

You can also derive trail items directly with getActiveTrailFromNavigation(items, { activeItemId }) or getActiveTrailFromNavigation(items, { pathname }).