ConsoleNav

ConsoleNav is grouped sidebar navigation for a dashboard. It collapses to an icon rail, keeps a badge as a dot, and leaves link rendering to the app so it is not tied to a router.

import { ConsoleNav } from '@lobehub/ui/dashboard';

NPM Source Edit

Navigation

Default

The list highlights the longest matching path. Fold a group to hide its items, or switch to the icon rail. A badge becomes a dot on the rail. Inside ConsoleShell the rail follows the shell unless collapsed is set.

Loading preview

Tree

Use items for top-level links and nested groups for a second level. Icons are optional: a group with an icon becomes a single rail button that links to its href (or its first item), and items without an icon are left off the rail. With defaultExpanded="active" every group starts folded and the branch holding the current page opens on navigation, then scrolls into view.

Loading preview

APIs

ConsoleNav properties

collapsed

boolean

Show the icon rail. Defaults to the enclosing `ConsoleShell` state.

defaultExpanded

'all' | 'active'

`all` opens every group. `active` starts with every group closed and opens the branch holding the current page, including after navigation.

Defaults to "all".

groups

ConsoleNavGroup[]

items

ConsoleNavItem[]

Ungrouped links listed before the groups.

label

string

Accessible name for the navigation landmark.

Defaults to "Primary".

onNavigate

(href: string) => void

Called with the item href. Prevents the anchor navigation when set.

pathnameRequired

string

renderLink

(props: ConsoleNavLinkProps) => ReactNode

Renders each item link. Use this to plug in a router `Link`. The default render is an anchor.

storageKey

string

Persists which groups were opened or closed by hand.