Nav
A horizontal or vertical unordered list
<Nav /> renders a ul element, and <NavItem /> renders a li element.
<Nav><NavItem><a href="#">Strings</a></NavItem><NavItem><a href="#">Woodwinds</a></NavItem><NavItem><a href="#">Brass</a></NavItem><NavItem><a href="#">Percussion</a></NavItem></Nav>
PropsLink to this heading
Link to this heading
<Nav>
import { Nav } from '@strum/react';
name | type | default |
|---|---|---|
alignItems | ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "baseline" | "stretch")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>> | - |
direction | "horizontal" | "vertical" | horizontal |
gap | ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>> | 4 |
justifyContent | ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>> | - |
DirectionLink to this heading
Link to this heading
The <Nav /> component defaults to a horizontal list, but you can use the direction prop to render it vertically.
<Nav direction="vertical"><NavItem>Guitar</NavItem><NavItem>Piano</NavItem></Nav>
Align and justifyLink to this heading
Link to this heading
Set the flex properties of the nav list using alignItems and justifyContent.
<Nav alignItems="flex-end" justifyContent="center"><NavItem>Guitar</NavItem><NavItem>Piano</NavItem></Nav>
You can adjust the spacing between nav items with the gap property.
<Nav gap="12"><NavItem>Guitar</NavItem><NavItem>Piano</NavItem></Nav>
ActiveLink to this heading
Link to this heading
Adding the active prop to a <NavItem /> will display the item in accent color and add the aria-current="page" attribute to that item.
<Nav><NavItem><a href="#">Strings</a></NavItem><NavItem active><a href="#">Woodwinds</a></NavItem><NavItem><a href="#">Brass</a></NavItem><NavItem><a href="#">Percussion</a></NavItem></Nav>