NavigationRail

Navigation rails let people switch between UI views on mid-sized devices.

Props

React props
NameTypeRequiredDefaultDescription
classNamestring | Partial<Record<"footer" | "header" | "navigationRail" | "menuIcon" | "segments", string>> | ClassNameComponent<NavigationRailInterface>NoRoot classes (string), static element classes (object), or state-aware element classes (function).
variant"standard" | "modal"No'standard'Visual density of the rail; `modal` is meant for a temporary overlay presentation.
selectedItemnumberNoControlled index of the selected item.
extendedbooleanNoControlled extended state of the rail.
defaultExtendedbooleanNoInitial extended state when uncontrolled.
alignment"middle" | "top"No'top'Vertical distribution of items: `top`-anchored or `middle` of the rail.
menu{ closed: NavigationRailMenuState; opened: NavigationRailMenuState; }No{ closed: { icon: iMenu, label: 'Open menu', }, opened: { icon: iClose, label: 'Close menu', }, }Icon and label shown by the menu toggle button in each extended/closed state.
footerReactNodeNoContent pinned below the item list (e.g. an account or sign-out action).