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

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.

Import

Basic Usage

Props

SidebarNavItem

Backoffice Guidance

On this page