Components

List

List is used to present content in a clear and structured way, for example to summarize main points or show the user which steps must be followed in a specific order.

Overview Code Accessibility

We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on Github or Slack.

If List is used as a navigation element (for example in the footer or beside the main content), you can wrap it in a <nav> with aria-label="" to provide a better experience for screen reader users. This is recommended because W3C advises against using aria-label / aria-labelledby directly on <ul> or <ol>. Read more in W3C’s article "Practical Support: aria-label, aria-labelledby and aria-describedby" (w3.org).

Example of `<nav>`

<nav aria-label="Snarveier">  <List.Unordered>    <List.Item>      <Button>Copy</Button>    </List.Item>    <List.Item>      <Button>Cut</Button>    </List.Item>    <List.Item>      <Button>Paste</Button>    </List.Item>  </List.Unordered></nav>;

`<menu>` instead of `<ul>`

Unordered lists can be replaced with <menu>, which is a semantic alternative to <ul>. Both elements represent an unordered list, and browsers interpret them in the same way. The difference is that <menu> is intended for interactive elements.

Example of `<menu>`

This is an example where List.Unordered has been changed to <menu>, and the purpose of the list is to display buttons that perform actions in the application.

<List.Unordered asChild>  <menu>    <List.Item>      <Button>Copy</Button>    </List.Item>    <List.Item>      <Button>Cut</Button>    </List.Item>    <List.Item>      <Button>Paste</Button>    </List.Item>  </menu></List.Unordered>;

Edit this page on github.com (opens in a new tab)

List

Lists for navigation

Example of <nav>

<menu> instead of <ul>

Example of <menu>

Example of `<nav>`

`<menu>` instead of `<ul>`

Example of `<menu>`