Dropdown Menu

A menu triggered by a button that presents a list of actions.

Actions expand_more

<div class="dd-wrap">
  <div class="dd-trigger">Actions <span class="material-icons-round">expand_more</span></div>
  <div class="dd-menu">
    <div class="dd-item"><span class="material-icons-round">edit</span>Edit</div>
    <div class="dd-sep"></div>
    <div class="dd-item danger"><span class="material-icons-round">delete</span>Delete</div>
  </div>
</div>

Installation

Built with pure HTML and CSS. Include ds-shared.css in your project.

pnpm add @norbielink/ds

API Reference

Classes

Class	Description
`dd-wrap`	Outer (position:relative)
`dd-trigger`	Toggle button
`dd-menu`	Floating menu (position:absolute)
`dd-item`	Menu item
`dd-item.danger`	Destructive item
`dd-sep`	Divider

← Previous Drawer Next → Empty State