Simple List

Material Design 3-styled simple list web components (lit-material-simple-list, lit-material-simple-list-item) — a plain, lightweight list of links, no ripple or leading/trailing icons.

1.2 KB gzipped
@lit-material/simple-list 0.1.0
Renders on the server

Example

Install

npm install @lit-material/simple-list @lit-material/tokens

import "@lit-material/simple-list";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

`<lit-material-simple-list-item>`

One item within lit-material-simple-list — a real <a href>, or a <button> for a JS-driven selection (no navigation). current is purely presentational: unlike lit-material-tabs, this component doesn't enforce single-selection across siblings — set/clear it yourself on whichever items should be highlighted.

Properties

Property	Attribute	Type	Default
`href`	`href`	`string`	`""`
`current`	`current`	`boolean`	`false`
`disabled`	`disabled`	`boolean`	`false`

Slots

Slot	Description
default	The item's label.

CSS parts

Part	Description
`item`	The `<a>` or `<button>`.

`<lit-material-simple-list>`

Groups lit-material-simple-list-item elements into a native <ul> — a plain, lightweight list of links or buttons (an in-page table of contents, a settings nav), with none of lit-material-list's ripple, focus-ring, or leading/trailing-icon richness. Real interactive elements (<a>/<button>) mean Tab and Enter already work natively, so — like lit-material-breadcrumb-item — there's no roving-tabindex or arrow-key-navigation logic here at all: reach for lit-material-list or lit-material-tree instead if you need that composite-widget behavior.

Slots

Slot	Description
default	`lit-material-simple-list-item` elements.

CSS parts

Part	Description
`list`	The `<ul>`.

Source on GitHub npm