List navigation

Lists support keyboard navigation by default via the useNavigation hook. It can be disabled by passing the prop navigation and tries to emulate the grid layout spec:

• Headline 1
• Headline 2
• Headline 3

• Headline 1
• Headline 2
• Headline 3

<List ariaLabel="example" navigation={true}>
  <ListButtonItem color="secondary" headline="Headline 1" onClick={() => {}} />
  <ListButtonItem color="secondary" headline="Headline 2" onClick={() => {}} />
  <ListButtonItem
    withDivider={false}
    color="secondary"
    headline="Headline 3"
    onClick={() => {}}
  />
</List>

<List ariaLabel="example" navigation={false}>
  <ListButtonItem color="secondary" headline="Headline 1" onClick={() => {}} />
  <ListButtonItem color="secondary" headline="Headline 2" onClick={() => {}} />
  <ListButtonItem
    withDivider={false}
    color="secondary"
    headline="Headline 3"
    onClick={() => {}}
  />
</List>