NavList

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

Hide code
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>
  );
}
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>
  );
}
Open in Playground

With buttons

Example of NavList using button as items

Hide code
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>
  );
}
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>
  );
}
Open in Playground

Controlled

Example of controlled NavList

Hide code
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>
  );
}
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>
  );
}
Open in Playground

With active and disabled states

Example with items with active or disabled state

Hide code
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>
  );
}
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>
  );
}
Open in Playground

NavList

NavList.Item

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.