Lists

Usage

Browsers

Chrome
Safari
Firefox

Firefox is the spiritual successor of Netscape Navigator.

<List style="max-width:300px">
	<ListItem>Browsers</ListItem>
	<Divider />
	<ListItem>Chrome</ListItem>
	<ListItem>Safari</ListItem>
	<ListItem>
		Firefox
		{#snippet supportingText()}
			Firefox is the spiritual successor of Netscape Navigator.
		{/snippet}
	</ListItem>
	<ListItem variant="button">
		Compare benchmarks
		{#snippet supportingText()}
			This will open a new tab
		{/snippet}
		{#snippet end()}
			<Icon>open_in_new</Icon>
		{/snippet}
	</ListItem>
</List>

Icon Item

Account

Setting

Sign out

<List style="max-width:300px">
	<ListItem>
		Account
		{#snippet start()}
			<Icon>person</Icon>
		{/snippet}
	</ListItem>
	<Divider />
	<ListItem>
		Setting
		{#snippet start()}
			<Icon>settings</Icon>
		{/snippet}
	</ListItem>
	<Divider />
	<ListItem>
		Sign out
		{#snippet start()}
			<Icon>logout</Icon>
		{/snippet}
	</ListItem>
</List>

Theming

Tokens

Token	Default value
`--np-item-container-height`	`3.5rem`, or `4.5rem` with supporting text
`--np-item-label-text-color`	`--np-color-on-surface`
`--np-item-supporting-text-color`	`--np-color-on-surface-variant`
`--np-item-leading-icon-color`	`--np-color-on-surface-variant`
`--np-item-trailing-icon-color`	`--np-color-on-surface-variant`

--np-item-container-height sets the minimum height of an item, so an item whose content is taller grows past it.

Example

Account

<ListItem
	--np-item-container-height="3rem"
	--np-item-label-text-color="var(--np-color-tertiary)"
	--np-item-leading-icon-color="var(--np-color-tertiary)"
>
	Account
	{#snippet start()}
		<Icon>person</Icon>
	{/snippet}
</ListItem>

Accessibility

List renders a plain <ul>, so anything you put inside becomes a list item for assistive technology. Pick the variant that matches what the item does: text for content that is only read, button for something that acts on the current page, and link for navigation. That choice decides the element that ends up in the DOM, and with it the role, the keyboard behaviour and whether the item is focusable at all.

A disabled item renders as a <div> with aria-disabled instead of a disabled control, which keeps it readable but takes it out of the tab order.

API

List attributes

Everything else you pass is forwarded to the <ul> element, so class, style and the usual event handlers work as expected.

Attribute	Type	Default	Description
`element`	`HTMLUListElement \| undefined`	`undefined`	Bindable reference to the underlying `<ul>`.

ListItem attributes

Attribute	Type	Default	Description
`variant`	`'text' \| 'button' \| 'link'`	`'text'`	Element the item renders as: a `<div>`, a `<button>` or an `<a>`. The interactive variants add a ripple.
`selected`	`boolean`	`false`	Whether the item is shown as selected.
`disabled`	`boolean`	`false`	Renders the item as non-interactive with `aria-disabled`, whatever the `variant` is.
`supportingText`	`Snippet \| undefined`	`undefined`	Second line below the label. An item with supporting text is taller.
`start`	`Snippet \| undefined`	`undefined`	Leading content, typically an icon or an avatar.
`end`	`Snippet \| undefined`	`undefined`	Trailing content, typically an icon, a switch or a checkbox.
`softFocus`	`boolean`	`false`	Shows the hover state without the item being hovered. Use it to mark the active option in a list that is driven by the arrow keys.
`lazy`	`boolean`	`false`	Skips rendering the item while it is off screen, for very long lists.
`type`	`'submit' \| 'reset' \| 'button' \| null`	`'button'`	Only for `variant="button"`. Set it to `submit` to have the item submit the surrounding form.