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

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 March 8, 2021