Skip to content

SideNav

Use side nav for a vertical list of navigational links, typically used on the left side of a page.
  • Deprecated
  • Not reviewed for accessibility

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.

Deprecation

Use NavList instead.

Before

<SideNav aria-label="Main">
<SideNav.Link href="/" selected>
Home
</SideNav.Link>
<SideNav.Link href="/about">About</SideNav.Link>
<SideNav.Link href="/contact">Contact</SideNav.Link>
</SideNav>

After

<NavList aria-label="Main">
<NavList.Item href="/" aria-current="page">
Home
</NavList.Item>
<NavList.Item href="/about">About</NavList.Item>
<NavList.Item href="/contact">Contact</NavList.Item>
</NavList>

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>

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.
sxSystemStyleObject{}Style to be applied to the component
NameTypeDefaultDescription
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.
sxSystemStyleObject{}Style to be applied to the component
Edit this page on GitHub
2 contributorskhiga8colebemis
Last edited by khiga8 on January 11, 2023