Menu

Material Design 3 menu web component, built on the native Popover API.

3.1 KB gzipped
@lit-material/menu 0.2.0
Renders on the server

Example

Install

npm install @lit-material/menu @lit-material/tokens

import "@lit-material/menu";

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

API

`<lit-material-menu>`

Material Design 3 menu — a floating list of options anchored to a trigger element, built on the native Popover API (top-layer rendering, light dismiss on outside click/Escape all come from the browser).

Properties

Property	Attribute	Type	Default	Description
`open`	`open`	`boolean`	`false`
`anchor`	`anchor`	`string \| undefined`	none	id of the trigger element to position and return focus to. See also `anchorElement`.
`anchorElement`	property only	`HTMLElement \| undefined`	none	The element the menu is positioned against and returns focus to on close.

Events

Event	Description
`close`	Fires after the menu closes, for any reason (item activation, `close()`, Escape, or an outside click).

Slots

Slot	Description
default	`lit-material-list-item` elements (or any other content).

CSS parts

Part	Description
`menu`	The popover surface (background, padding, shape, elevation).

Source on GitHub npm