App launcher

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-app-launcher>`

An app launcher: a grid button in a top bar that opens a menu of the other apps and consoles a person can go to — Grafana, the billing portal, the docs.

Properties

Property	Attribute	Type	Default	Description
`label`	`label`	`string`	`"Applications"`	Names the button and the menu.
`searchable`	`searchable`	`boolean`	`false`	Adds a field that filters the apps by their text.
`searchLabel`	`search-label`	`string`	`"Search applications"`	The search field's accessible name.
`emptyText`	`empty-text`	`string`	`"No applications match"`	Shown when the search matches nothing.
`open`	`open`	`boolean`	`false`

Events

Event	Description
`close`	After the menu closes.

Slots

Slot	Description
default	The apps: `lit-material-list-item` elements with `href`.
`icon`	Replaces the grid icon on the button.

CSS parts

Part	Description
`button`	The button that opens the menu.
`menu`	The menu.
`search`	The search field.

Source on GitHub npm