Overflow Menu
Material Design 3-styled overflow menu web component (lit-material-overflow-menu) — a responsive action row that collapses overflowing items into a kebab menu.
- 2.0 KB gzipped
- @lit-material/overflow-menu 0.0.3
- Renders on the server
Example
Overflow Menu
A responsive action row that collapses overflowing items into a kebab (⋮) menu. Try narrowing the container width below.
Markup
<lit-material-overflow-menu style="width: 250px;"> <button>Share</button> <button>Duplicate</button> <button>Archive</button> <button>Rename</button> <button>Delete</button> </lit-material-overflow-menu>
Install
npm install @lit-material/overflow-menu @lit-material/tokensimport "@lit-material/overflow-menu";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-overflow-menu>
A responsive action row: slotted items render inline until they no
longer fit the available width, at which point the excess collapses
into a "more" (⋮) kebab menu — a native Popover API (popover="auto")
dropdown, positioned the same way lit-material-menu positions itself.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
label | label | string | "More actions" | Accessible name for the "more" button. |
Events
| Event | Description |
|---|---|
overflow-change | Fires when items move into or out of the overflow menu, with detail.overflowing (the count). |
Slots
| Slot | Description |
|---|---|
| default | The action items (buttons, links, icon-buttons — any content), in priority order (first = most important, kept visible longest). |
CSS parts
| Part | Description |
|---|---|
row | The visible row of items. |
more | The "more" (⋮) button. Hidden entirely when nothing overflows. |
menu | The overflow popover. |