NavList

Alpha component

NavList component is subject to major changes and is for experimentation purposes only. Not recommended for use in production software.

NavList is used to render a sidebar navigation list

Import

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

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

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.Item
isActive={active === 1}
onClick={handleOnClick(1)}
as="button"
>
Fields
</NavList.Item>
<NavList.Item
isActive={active === 2}
isDisabled
onClick={handleOnClick(2)}
as="button"
>
Name and description
</NavList.Item>
<NavList.Item
isActive={active === 3}
onClick={handleOnClick(3)}
as="button"
>
JSON preview
</NavList.Item>
<NavList.Item
isActive={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 Storybook

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

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 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.