Components · Menus, lists and dividers

List Item

A list item is the content of one row: an optional leading element, a label and an optional trailing element. It is used inside Menu, Overflow menu, List Picker, Drawer link and Filter sections in drawer content.

How to add a list item to a page. The file is components/css/list-item.css.

Basic Usage

Link the shared stylesheet once per page. Never copy the rules into a page.

Step	What to do
1. Link	`<link rel="stylesheet" href="/components/css/list-item.css">`. Both templates already have it.
2. Markup	A `div.list-item` with a `span.list-item__fill` (leading element and label) and an optional trailing element.
3. Container	Put the item inside a container row (`li.menu__item`). The row sets padding, divider, hover and focus.
4. State	Inside a row: `aria-selected` on the row. Standalone: `role` and `aria-checked` on the item, plus the toggle script.
5. Size	Large is the default. Add `list-item--sm` for Small.

List item

Copy the markup you need.

API

Classes

Class	Use
`list-item`	The item. Large.
`list-item--sm`	Small.
`list-item__fill`	Leading element and label.
`list-item__label--bold`	A bold label.
`list-item__text`	A column for overline, label and supporting text.

Things to know

Breakpoint: the Large label is 16/22 below 769px and 17/24 from 769px. The CSS does this by itself.
Never add height, divider or hover styles to a list item: the container owns them.
Swatch colors are product data: set them with style="--swatch: …".
The toggle behavior of a standalone item is a small script; copy it from the recipe on this page.
The [data-state] selectors do nothing outside the documentation pages.

CSS / Tailwind

The component is one CSS file, shared by every page. Link it, never copy it. The CSS below is read from the file the page links, so it is always what you see.

CSS (components/css/list-item.css)