SidebarNav

SidebarNav structures backoffice navigation into predictable groups with active states, badges, and optional icon slots.

Import

import {
  SidebarNav,
  SidebarNavFooter,
  SidebarNavItem,
  SidebarNavList,
  SidebarNavSection,
  SidebarNavSectionTitle,
} from '@nim-ui/components';

Basic Usage

Workspace Navigation

View Code

<SidebarNav aria-label="Backoffice navigation">
  <SidebarNavSection>
    <SidebarNavSectionTitle>Operate</SidebarNavSectionTitle>
    <SidebarNavList>
      <SidebarNavItem href="/orders" active badge="18">Orders</SidebarNavItem>
      <SidebarNavItem href="/inventory" badge="4">Inventory</SidebarNavItem>
    </SidebarNavList>
  </SidebarNavSection>
  <SidebarNavFooter>Workspace metadata</SidebarNavFooter>
</SidebarNav>

Props

SidebarNavItem

Name	Type	Default	Description
active	boolean	false	Applies active styling and sets aria-current="page".
badge	ReactNode	-	Optional count or status marker aligned to the end of the item.
icon	ReactNode	-	Optional decorative icon slot rendered before the label.
href	string	-	Navigation target for the rendered anchor.

Backoffice Guidance

• Keep section titles operational: Operate, Review, Configure, Report.
• Use badges for work counts that change operator behavior, not decoration.
• Pair with AdminShellSidebar for full app-frame layouts.