4.1.0-alpha.1 • Published 1 year ago
@contentful/f36-navlist v4.1.0-alpha.1
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 asnav
ordiv
NavList.Item
can be rendered asbutton
ora
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 anaria-label
to override the defaultSidebar
4.1.0-alpha.1
1 year ago
4.1.0-alpha.0
1 year ago