Primer
Product UI

NavList

NavList renders a vertical list of navigation links.

Page navigation navigation

States

Edit in Figma

Resting: Default state, link is not active.

Current: Indicates the active view.

Inactive: Indicates that the link href is unavailable due to a system error. See degraded experience guidelines for more information.

Loading: Link URL is being resolved. See loading guidelines for more information.

Expanded sub-items: The item is expanded to show its sub-items.

Collapsed sub-items: The item has sub-items, but they are hidden.

Best practices

  • Only use links: NavList items should only be links. Use ActionList for mixed links and actions.
  • Use leading visuals consistently: either for all or none, to improve scanability.
  • Logical order: Group related items with dividers as needed and list them in an intuitive order.
Do
Edit in Figma
Use leading visuals consistently.
Don’t
Edit in Figma
Avoid mixing items that have leading visuals with items that don't.
Do
Edit in Figma
Only use dividers to visually group items.
Don’t
Edit in Figma
Don't use dividers to separate individual items.

Anatomy

NavList items are rendered using ActionList items, so they share anatomy, styles, and some options.

Responsive layout

For information on responsive layout of a NavList that is used in a sidebar, see the responsive sidebar navigation patterns section of our navigation guidelines for more information.