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 "@instruments/materia-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"`.
children	`string \| number \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| undefined`		Link label, matching what `MenuItem` renders.
href	`string`
icon	`LucideIcon`		Leading icon shown before the label.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>`		Element to render as the link instead of an `<a>` (e.g. a router `Link`). It carries its own props; the anchor props here apply only to the default `<a>`.

Also exports

componentSubNavigation
interfaceSubNavigationLinkProps
componentSubNavigationList
typeSubNavigationListProps
typeSubNavigationProps

Composition

Builds on

Flex, MenuItem