Dropdown — NanoUI

A menu that appears below a trigger element. Requires the nanoui-dropdown Stimulus controller.

Example

<div class="nano-dropdown" data-controller="nanoui-dropdown">
  <div class="nano-dropdown__trigger"
       data-action="click->nanoui-dropdown#toggle"
       data-nanoui-dropdown-target="trigger">
    <button class="nano-btn nano-btn--outline">Options</button>
  </div>

  <div class="nano-dropdown__content" data-nanoui-dropdown-target="content">
    <p class="nano-dropdown__label">Actions</p>
    <button class="nano-dropdown__item">Edit</button>
    <button class="nano-dropdown__item">Duplicate</button>
    <div class="nano-dropdown__separator"></div>
    <button class="nano-dropdown__item">Delete</button>
  </div>
</div>

Stimulus controller

The nanoui-dropdown controller provides:

Targets: trigger, content
Actions: toggle(), open(), close()
Arrow key navigation between items
Escape to close
Click outside to close