Forma 36

NavList

Give feedback

NavList is used to render a sidebar navigation list

Import

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

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>

  );

}
Open in Playground

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>

  );

}
Open in Playground

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>

  );

}
Open in Playground

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>

  );

}
Open in Playground

Props (API reference)

Open in Storybook

Name

Type

Default

children
required
ReactNode

aria-label
string

as
"div"
"nav"

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
"a"
"abbr"
"address"
"animate"
"animateMotion"
"animateTransform"
"area"
"article"
"aside"
"audio"
"b"
"base"
"bdi"
"bdo"
"big"
"blockquote"
"body"
"br"
"button"
"canvas"
"caption"
"center"
"circle"
"cite"
"clipPath"
"code"
"col"
"colgroup"
"data"
"datalist"
"dd"
"defs"
"del"
"desc"
"details"
"dfn"
"dialog"
"div"
"dl"
"dt"
"ellipse"
"em"
"embed"
"feBlend"
"feColorMatrix"
"feComponentTransfer"
"feComposite"
"feConvolveMatrix"
"feDiffuseLighting"
"feDisplacementMap"
"feDistantLight"
"feDropShadow"
"feFlood"
"feFuncA"
"feFuncB"
"feFuncG"
"feFuncR"
"feGaussianBlur"
"feImage"
"feMerge"
"feMergeNode"
"feMorphology"
"feOffset"
"fePointLight"
"feSpecularLighting"
"feSpotLight"
"feTile"
"feTurbulence"
"fieldset"
"figcaption"
"figure"
"filter"
"footer"
"foreignObject"
"form"
"g"
"h1"
"h2"
"h3"
"h4"
"h5"
"h6"
"head"
"header"
"hgroup"
"hr"
"html"
"i"
"iframe"
"image"
"img"
"input"
"ins"
"kbd"
"keygen"
"label"
"legend"
"li"
"line"
"linearGradient"
"link"
"main"
"map"
"mark"
"marker"
"mask"
"menu"
"menuitem"
"meta"
"metadata"
"meter"
"mpath"
"nav"
"noindex"
"noscript"
"object"
"ol"
"optgroup"
"option"
"output"
"p"
"param"
"path"
"pattern"
"picture"
"polygon"
"polyline"
"pre"
"progress"
"q"
"radialGradient"
"rect"
"rp"
"rt"
"ruby"
"s"
"samp"
"script"
"search"
"section"
"select"
"set"
"slot"
"small"
"source"
"span"
"stop"
"strong"
"style"
"sub"
"summary"
"sup"
"svg"
"switch"
"symbol"
"table"
"tbody"
"td"
"template"
"text"
"textarea"
"textPath"
"tfoot"
"th"
"thead"
"time"
"title"
"tr"
"track"
"tspan"
"u"
"ul"
"use"
"var"
"video"
"view"
"wbr"
"webview"
ComponentClass<any, any>
FunctionComponent<any>

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.

Help improve this page

Edit on GithubRead the contribution guide