A NavList organizes navigation links for the user's current context and indicates which view they're currently on. It is typically used as a sidebar that changes what is rendered in the main content area.
<NavList>
<NavList.Item href="#" aria-current="page">
Item 1
</NavList.Item>
<NavList.Item href="#">Item 2</NavList.Item>
<NavList.Item href="#">Item 3</NavList.Item>
</NavList>
Use groups to simplify navigation in long lists. For visual sections without semantically grouping items in a nested ul, use dividers.
<NavList>
<NavList.Group title="Group 1">
<NavList.Item aria-current="true" href="#">
Item 1A
</NavList.Item>
<NavList.Item href="#">Item 1B</NavList.Item>
<NavList.Item href="#">Item 1C</NavList.Item>
</NavList.Group>
<NavList.Group title="Group 2">
<NavList.Item href="#">Item 2A</NavList.Item>
<NavList.Item href="#">Item 2B</NavList.Item>
<NavList.Item href="#">Item 2C</NavList.Item>
</NavList.Group>
</NavList>
Top-level items can expand/collapse sub-items. Only the top-level items act as toggles, not links. Use up to 4 nesting levels—reconsider your navigation design if you need more.
Do not replace your NavList with a TreeView to support a deeply nested navigation structure. A TreeView is never an accessible replacement for navigation, as it serves a different purpose and is not recognized as navigation by assistive technologies.
<NavList>
<NavList.Item href="#" defaultOpen>
Item 1
<NavList.SubNav>
<NavList.Item href="#" aria-current="page">
Sub item 1
</NavList.Item>
<NavList.Item href="#">Sub item 2</NavList.Item>
</NavList.SubNav>
</NavList.Item>
<NavList.Item href="#">Item 2</NavList.Item>
<NavList.Item href="#">Item 3</NavList.Item>
</NavList>
Leading visuals are commonly used to show a visual hint for what the item is. For example, an icon or avatar that represents the view being linked to.
<NavList>
<NavList.Item href="#" aria-current="page">
<NavList.LeadingVisual>
<RepoIcon />
</NavList.LeadingVisual>
Repos
</NavList.Item>
<NavList.Item href="#">
<NavList.LeadingVisual>
<PersonIcon />
</NavList.LeadingVisual>
People
</NavList.Item>
<NavList.Item href="#">
<NavList.LeadingVisual>
<FileDirectoryIcon />
</NavList.LeadingVisual>
Folders
</NavList.Item>
</NavList>
Trailing visuals are commonly used to show auxiliary information about the item. For example, a count of unread notifications on the page.
<NavList>
<NavList.Item href="#" target="_blank" aria-current="page">
Item 1
<NavList.TrailingVisual>
<LinkExternalIcon />
</NavList.TrailingVisual>
</NavList.Item>
<NavList.Item href="#" target="_blank">
Item 2
<NavList.TrailingVisual>
<LinkExternalIcon />
</NavList.TrailingVisual>
</NavList.Item>
<NavList.Item href="#" target="_blank">
Item 3
<NavList.TrailingVisual>
<LinkExternalIcon />
</NavList.TrailingVisual>
</NavList.Item>
</NavList>
<NavList>
<NavList.Item href="#" aria-current="page">
Item 1
<NavList.TrailingAction
label="Pin item 1"
icon={PinIcon}
onSelect={() => {
alert('Fake pin Item 1')
}}
/>
</NavList.Item>
<NavList.Item href="#">
Item 2
<NavList.TrailingAction
label="Pin item 2"
icon={PinIcon}
onSelect={() => {
alert('Fake pin Item 2')
}}
/>
</NavList.Item>
<NavList.Item href="#">
Item 3
<NavList.TrailingAction
label="Pin item 3"
icon={PinIcon}
onSelect={() => {
alert('Fake pin Item 3')
}}
/>
</NavList.Item>
</NavList>
See the NavList Storybook stories
Loading data for nav_list...