SubNavigation

Vertical secondary navigation for page subsections and settings-like layouts; the <nav> landmark wrapping a {@link SubNavigationList} of links.

Usage

import { SubNavigation, SubNavigationLink, SubNavigationLinkProps, SubNavigationList, SubNavigationListProps, SubNavigationProps } from "@desk/ui/components/sub-navigation";

Best practices

Reach for SubNavigation for a vertical in-page section/settings menu; horizontal router tabs are TabNavigation, the app-chrome shell is Sidebar.
Fill it with a SubNavigationList of links — it already renders the <nav> landmark, so don't nest it inside another <nav>.

Props

Prop	Type	Default	Description
active	`boolean`	`false`	Marks the current page — applies active styling and sets `aria-current="page"`.
asChild	`boolean`	`false`	Render the child element as the link instead of an `<a>` (e.g. a router `Link`).
href	`string`
icon	`LucideIcon`		Leading icon shown before the label.

Also exports

componentSubNavigation
interfaceSubNavigationLinkProps
componentSubNavigationList
typeSubNavigationListProps
typeSubNavigationProps

Composition

Builds on

MenuItem