---
id: nav-list
title: NavList
---

import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';

# NavList

## How to use

<code src="@digigov/ui/src/navigation/NavList/__stories__/Default.tsx" />

### Vertical NavList

<code src="@digigov/ui/src/navigation/NavList/__stories__/Vertical.tsx" />

### Horizontal NavList with submenu

<code src="@digigov/ui/src/navigation/NavList/__stories__/HorizontalWithoutDrawer.tsx" />

### Vertical NavList with submenu

<code src="@digigov/ui/src/navigation/NavList/__stories__/VerticalWithoutDrawer.tsx" />

### Auto

<PhaseBanner>
  <PhaseBannerTag>EXPERIMENTAL</PhaseBannerTag>
</PhaseBanner>

This is an implementation of NavList, utilizing the `useNavList` hook to register each item along with its associated content.

<code src="@digigov/ui/src/navigation/NavList/__stories__/UsingNavListAuto.tsx" />

## Accessibility

You can read more about the accessibility patterns used in our NavList
implementation in the ARIA Authoring Practices Guide (APG) at
[Menu or Menu bar](https://www.w3.org/WAI/ARIA/apg/patterns/menu/).

## API

See below for a complete reference to all of the props available to the components mentioned here.

<ComponentProps
  componentName={[
    'Nav',
    'NavList',
    'NavListAction',
    'NavListItemActionContainer',
    'NavListItemButton',
    'NavListItemLinkBase',
    'NavMenuContainer',
    'NavMenuContentListBase',
    'NavMenuContentListItem',
    'NavMenuTitle',
  ]}
/>