Skip to content

SideNav

The Side Nav is a vertical list of navigational links, typically used on the left side of a page. For maximum flexibility, SideNav elements have no default width or positioning.

Default example

Different kinds of content can be added inside a SideNav item. Use system props to further style them if needed.

Full variant

Add the variant='full' prop to a SideNav.Link to spread child elements across the link, which is useful for status icons, labels, and the like.

Lightweight variant

Add the variant="lightweight" prop to SideNav to render an alternative, more lightweight version that has items with no borders and are more condensed.

It can also appear nested, as a sub navigation. Use margin/padding System Props to add indentation.

Usage with React Router

If using React Router, you can use the as prop to render the element as a NavLink. React Router will automatically handle setting aria-current="page" for you.

<SideNav.Link as={NavLink} to="...">...</SideNav.Link>

System props

SideNav components get COMMON, BORDER, and LAYOUT system props. SideNav.Link components get COMMON and TYPOGRAPHY system props. Read our System Props doc page for a full list of available props.

Component props

SideNav

NameTypeDefaultDescription
asString'nav'Sets the HTML tag for the component.
borderedBooleanfalseRenders the component with a border.
variantString'normal'Set to lightweight to render in a lightweight style.
NameTypeDefaultDescription
asString'a'Sets the HTML tag for the component.
hrefStringURL to be used for the Link
mutedBooleanfalseUses light gray for Link color, and blue on hover
selectedBooleanfalseSets the link as selected, giving it a different style and setting the aria-current attribute.
underlineBooleanfalseAdds underline to the Link
variantString'normal'Set to full to render a full variant, suitable for including icons and labels.