NNexusDocumentation
Live demo
GuideCustomize

Navigation & Menus

Add, reorder, nest, protect, or remove sidebar items while keeping search and mobile behavior synchronized.

11 min readCustomizeUpdated for Nexus 0.1
On this page 6

What you will learn

  • Add a menu item correctly.
  • Keep routes and search aligned.
  • Plan permission-aware navigation.

Single source of truth

Sidebar sections and searchable links are generated from lib/navigation.ts. Add the page route first, then add its navigation definition.

tsx
{
  label: "Reports",
  href: "/reports",
  icon: "chart"
}

Add a nested group

Use children for related routes. Keep labels short enough for the expanded sidebar and ensure the group has a useful destination.

tsx
{
  label: "Operations",
  href: "/operations",
  icon: "grid",
  children: [
    { label: "Orders", href: "/operations/orders", icon: "file" },
    { label: "Inventory", href: "/operations/inventory", icon: "box" }
  ]
}

Add the icon contract

Navigation icon names are a typed union and are mapped to local SVG components in components/app-shell.tsx. Reuse an existing name or add the type and renderer mapping together.

  • The icon name passes TypeScript.
  • The icon appears in expanded and compact sidebars.
  • The active state follows the correct parent route.
  • The item appears in topbar search when intended.

Permissions

Hiding a menu item is presentation logic, not authorization. Filter navigation for the signed-in user, but also reject unauthorized requests in the server, API, and data layer.

Mobile verification

After changing navigation, test the drawer at narrow widths.

  • Open and close controls remain fully visible.
  • Long sections scroll inside the drawer.
  • Selecting a route closes the drawer.
  • Focus returns to the menu trigger after closing.

Continue learning