Menu

Preview

Usage

The DocsSidebarNav component accepts an array of SidebarNavItem objects and an optional className prop. Each item can have nested children, labels, disabled state, and external links.

Basic Usage

The simplest usage with just titles and hrefs:

With Labels

Add visual badges using the label property. Supported values are "new", "recent", and "updated":

Nested Items

Create multi-level navigation by nesting items within the items array:

Complete Example

A comprehensive example showcasing all properties together:

API Surface

Prop	Type	Default	Notes
items	SidebarNavItem[]	—	Structured tree containing sections and child links. Matches `docsConfig.sidebarNav`.
item.href	string	—	Optional URL used to highlight the active link through `usePathname`.
item.label	"new" | "recent" | "updated"	—	Renders color-coded badges next to the nav item.
item.items	SidebarNavItem[]	[]	Nest additional pages to create multi-depth menus.
item.disabled	boolean	false	Disables the nav item, making it non-clickable and visually muted.
item.external	boolean	false	Opens the link in a new tab with proper security attributes.
className	string	—	Optional CSS class to apply custom styling to section titles.

Accessibility

• Links include focus states and rely on semantic <a> tags for screen-reader support.
• Use descriptive titles for every nav item so the sidebar remains scannable.
• Keep badge labels short (≤6 characters) to avoid truncation on narrow viewports.