Skip to content


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

System props are deprecated in all components except Box. Please use the sx prop instead.

SideNav components get COMMON, BORDER, LAYOUT, and FLEX 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


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.
asString'a'Sets the HTML tag for the component.
hrefStringURL to be used for the Link
mutedBooleanfalseUses a less prominent shade for Link color, and the default link shade 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.
Edit this page on GitHub
4 contributorsVanAndersoncolebemisemplumsBinaryMuse
Last edited by VanAnderson on July 22, 2021