Nav

A horizontal or vertical unordered list

<Nav /> renders a ul element, and <NavItem /> renders a li element.

<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<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
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.

Align and justify
Link to this heading

Set the flex properties of the nav list using alignItems and justifyContent.

You can adjust the spacing between nav items with the gap property.

Adding the active prop to a <NavItem /> will display the item in accent color and add the aria-current="page" attribute to that item.