title: 'NavList' type: 'component' status: 'alpha' 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 can be used to render a sidebar navigation list

Import

import { NavList } from '@contentful/f36-navlist';

Examples

NavList can be used to render vertical navigation list, it can be used for links and for 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

With buttons

Example of NavList using button as items

Controlled

Example of controlled NavList

With active and disabled states

Example with items with active or disabled state

Props (API reference)

NavList

NavList.Item

Content guidelines

Link names should be shor and descriptive

Accessibility

• If rendered with div the role of navigation is set.
• NavList can be passed an aria-label to override the default Sidebar