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>

<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<{ 1: CSSVarFunction; auto: CSSVarFunction; 0: 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; }; }>>
-

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 justify
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>

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>