--- title: NavList description: Use NavList to render vertical navigation with optional expandable groups. keywords: ['navigation', 'vertical navigation', 'sidebar', 'nested navigation'] ready: true source: https://github.com/primer/brand/tree/main/packages/react/src/NavList/NavList.tsx storybook: '/brand/storybook/?path=/story/components-navlist--playground' --- ```js import {NavList} from '@primer/react-brand' ``` ## Examples ### Default ```jsx Overview Quickstart Install GitHub Copilot Configure your editor Manage policies Troubleshooting ``` ### Groups Use `NavList.Group` to organize related navigation items into labelled groups. ```jsx Copilot Codespaces Actions Packages Pull requests Issues Discussions Overview Secret scanning Code scanning ``` ### Nested disclosure Add `NavList.SubNav` to a `NavList.Item` when an item needs to expand and collapse nested navigation links. ```jsx Pull requests Review pull requests Use suggested changes Configure rulesets Branches Overview Protection rules ``` ### Up to five navigation levels `NavList` can include up to five levels when a page hierarchy requires it. Use the fewest levels needed; levels one through four can optionally expand or collapse, and level five is reserved for leaf article links. ```jsx GitHub Copilot Guides Agents Build an agent Create a tool Add memory Debug prompts Deploy safely Customize an agent Debug an agent Extensions Install an extension Publish an extension Manage permissions Administration Overview Policies Audit log Code review Overview Review pull requests Use suggested changes ``` ### With visuals Use `leadingVisual` and `trailingVisual` to add icons to the label area. Visuals are additive: they do not replace disclosure triangles, change item sizing, or move the active and inactive row alignment. ```jsx }> GitHub Copilot ``` ## Accessibility Give each `NavList` a clear `aria-label`, especially when the page includes more than one navigation landmark. Use `aria-current="page"` on the link for the current page. Only apply `aria-current` to leaf items that navigate somewhere, not to disclosure rows with nested items. Keep group titles and disclosure labels short and descriptive. Items with `NavList.SubNav` must include visible label text so people can understand what will expand. ## Component props ### NavList `Required` | name | type | default | required | description | | ----------------- | ----------- | ------- | -------- | ----------------------------------------------------- | | `children` | `ReactNode` | | `true` | `NavList.Item` and `NavList.Group` nodes | | `aria-label` | `string` | | `true` | Accessible label for the navigation landmark | | `aria-labelledby` | `string` | | `false` | ID of the element that labels the navigation landmark | | `className` | `string` | | `false` | Sets a custom class on the `nav` element | Forwards all standard HTML attributes for `