Sidebar Nav

Sidebar navigation items with active states

SaaSNavigation

Overview

SidebarNav renders a vertical navigation list inside a Sidebar. It supports active item highlighting, nested children with expandable groups, badge indicators, disabled items, and collapsed mode where parent items show flyout popovers on hover. SidebarNavItem can also be used standalone.

Usage

import { SidebarNav } from "@leanicon/web-builder-library/saas";

<SidebarNav
  items={[
    { id: "dashboard", label: "Dashboard" },
    { id: "users", label: "Users" },
    {
      id: "content",
      label: "Content",
      children: [
        { id: "posts", label: "Posts" },
        { id: "pages", label: "Pages" },
      ],
    },
  ]}
  activeId="dashboard"
  onItemClick={(item) => navigate(item.id)}
/>;

Variants

Default

Active Item

With Nested Items Expanded

Empty

Dark

SidebarNavItem - Default

SidebarNavItem - Active

SidebarNavItem - Disabled

SidebarNavItem - Collapsed

SidebarNavItem - Dark

Props

Name	Type	Default	Required	Description
`items`	`NavigationItem[]`	—	Yes	Navigation items to render
`activeId`	`string`	—	No	Currently active item ID
`onItemClick`	`((item: NavigationItem) => void)`	—	No	Callback when an item is clicked
`showTooltips`	`boolean`	`true`	No	Whether to show tooltips in collapsed mode
`isCollapsed`	`boolean`	—	No	Whether the sidebar is collapsed. Overrides the value from `NavigationContext` when supplied — useful when SidebarNav is used standalone (no AppShell / NavigationProvider above it), such as in docs previews or side-by-side comparisons.