Dropdown

The dropdown uses <details> for a JavaScript-free toggle.

Preview

Usage

<details class="glass-dropdown">
  <summary>Select an option</summary>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Edit Profile</a></li>
    <li><a class="dropdown-item" href="#">Settings</a></li>
    <li><a class="dropdown-item active" href="#">Dashboard</a></li>
    <li><a class="dropdown-item" href="#">Sign Out</a></li>
  </ul>
</details>

Structure

Element / Class	Purpose
.glass-dropdown	Wrapper (use <details> element). position: relative
summary	Trigger button with glass material and a ▼ indicator
.dropdown-menu	Absolutely positioned menu panel with heavy blur
.dropdown-item	Individual menu item with hover/active states
.dropdown-item.active	Highlighted item (accent color + active background)

Behavior

• Closed: Summary shows the ▼ arrow
• Open: Arrow rotates 180°, summary gets active background, menu appears below
• Menu Items: Hover brightens background; active press darkens it
• The menu has z-index: 500 and heavy blur (--glass-blur-thick)

Compatible Modifiers

• .thin / .thick — material weight
• .vibrant — accent tint
• .glow — outer glow