Import
import { NavList } from '@contentful/f36-navlist';// orimport { NavList } from '@contentful/f36-components';
Examples
NavList is used to render vertical navigation list, it may contains links or buttons:
NavList
can be rendered asnav
ordiv
NavList.Item
can be rendered asbutton
ora
Basic
Basic example of NavList rendered with links
function NavListBasic() {return (<NavList aria-label="Content Type Sidebar"><NavList.Item>Fields</NavList.Item><NavList.Item>Name and description</NavList.Item><NavList.Item>JSON preview</NavList.Item><NavList.Item>Side bar</NavList.Item></NavList>);}
With buttons
Example of NavList using button as items
function WithButtons() {return (<NavList><NavList.Item as="button">Fields</NavList.Item><NavList.Item as="button">Name and description</NavList.Item><NavList.Item as="button">JSON preview</NavList.Item><NavList.Item as="button">Side bar</NavList.Item></NavList>);}
Controlled
Example of controlled NavList
function NavListControlled() {const [active, setActive] = useState(0);const handleOnClick = (id) => () => {setActive(id);};return (<NavList><NavList.ItemisActive={active === 1}onClick={handleOnClick(1)}as="button">Fields</NavList.Item><NavList.ItemisActive={active === 2}isDisabledonClick={handleOnClick(2)}as="button">Name and description</NavList.Item><NavList.ItemisActive={active === 3}onClick={handleOnClick(3)}as="button">JSON preview</NavList.Item><NavList.ItemisActive={active === 4}onClick={handleOnClick(4)}as="button">Side bar</NavList.Item></NavList>);}
With active and disabled states
Example with items with active or disabled state
function NavListWithActiveAndDisabled() {return (<NavList><NavList.Item isActive>Fields</NavList.Item><NavList.Item isDisabled>Name and description</NavList.Item><NavList.Item>JSON preview</NavList.Item><NavList.Item>Side bar</NavList.Item></NavList>);}
Props (API reference)
Open in StorybookNavList
Name | Type | Default |
---|---|---|
children required | ReactNode | |
aria-label | string | |
as | HTML Tag or React Component (e.g. div, span, etc) | nav |
className | string CSS class to be appended to the root element | |
testId | string A [data-test-id] attribute used for testing purposes |
NavList.Item
Name | Type | Default |
---|---|---|
as | HTML Tag or React Component (e.g. div, span, etc) | a |
children | ReactNode | |
className | string CSS class to be appended to the root element | |
isActive | false true Marks item as active | |
isDisabled | false true Marks item as disabled | |
testId | string A [data-test-id] attribute used for testing purposes |
Content guidelines
NavList.Item
texts should be short and descriptive
Accessibility
- When rendered with
div
thearia-role
must be set tonavigation
. NavList
can be passed anaria-label
to override the defaultSidebar
.NavList.Item
should always navigate the user, and not trigger other actions.