CSS is Awesome

Interactive component

Dropdown

Zero-JS dropdown menu built on native [popover]. Click outside auto-dismisses, Escape closes, focus management is native. Pair with a popovertarget trigger button — no JavaScript needed.

0 KB JSBaseline 2024Auto-dismiss

ProfileSettingsLog out

Usage

// app.scss
@use 'css-is-awesome' as cia;

.user-menu { @include cia.dropdown; }
<!-- index.html -->
<button popovertarget="user-menu" type="button">
  Menu ▾
</button>

<div id="user-menu"
     popover
     class="cia-dropdown">
  <a href="/profile"  class="cia-dropdown-item">Profile</a>
  <a href="/settings" class="cia-dropdown-item">Settings</a>
  <hr class="cia-dropdown-divider">
  <a href="/logout" class="cia-dropdown-item">Log out</a>
</div>
MetricciaFloating UI + Dropdown
JavaScript shipped0 KB~12 KB
Outside-click dismissNative (regular popover mode)JS document listener
Escape to closeNativeJS handler
LayeringTop layer (native)Portal + z-index
Open animationCSS keyframes via mixinJS-controlled CSS classes
Theme