---
title: 'NavList'
type: 'component'
status: 'stable'
slug: /components/navlist/
github: 'https://github.com/contentful/forma-36/tree/main/packages/components/navlist'
storybook: 'https://f36-storybook.contentful.com/?path=/story/components-navlist--basic'
typescript: ./src/NavList/NavList.tsx,./src/NavListItem/NavListItem.tsx
---

`NavList` is used to render a sidebar navigation list

## Import

```jsx static=true
import { NavList } from '@contentful/f36-navlist';
// or
import { NavList } from '@contentful/f36-components';
```

## Examples

NavList is used to render vertical navigation list, it may contains links or buttons:

- `NavList` can be rendered as `nav` or `div`
- `NavList.Item` can be rendered as `button` or `a`

### Basic

Basic example of NavList rendered with links

```jsx file=./examples/NavListBasicExample.tsx

```

### With buttons

Example of NavList using button as items

```jsx file=./examples/NavListWithButtonsExample.tsx

```

### Controlled

Example of controlled NavList

```jsx file=./examples/NavListControlledExample.tsx

```

### With active and disabled states

Example with items with active or disabled state

```jsx file=./examples/NavListWithActiveAndDisabledExample.tsx

```

## Props (API reference)

### NavList

<PropsTable of="NavList" />

### NavList.Item

<PropsTable of="NavListItem" />

## Content guidelines

- `NavList.Item` texts should be short and descriptive

## Accessibility

- When rendered with `div` the `aria-role` must be set to `navigation`.
- `NavList` can be passed an `aria-label` to override the default `Sidebar`.
- `NavList.Item` should always navigate the user, and not trigger other actions.