Menu

Dropdown

The .quanta-dropdown component provides customizable menus that can be triggered on hover or click. You can control its alignment, styling, and behavior with utility classes.

Usage (Hover Trigger)

Add .quanta-dropdown-hover to open the menu on hover.

<div class="quanta-dropdown quanta-dropdown-hover">
  <button class="quanta-dropdown-toggle">Hover me</button>
  <div class="quanta-dropdown-menu">
    <div class="quanta-dropdown-item">Action 1</div>
    <div class="quanta-dropdown-item">Action 2</div>
    <div class="quanta-dropdown-item">Action 3</div>
  </div>
</div>

Usage (Click Trigger)

Add .quanta-dropdown-click to toggle the menu on click. Requires a small JS snippet to listen for toggle clicks.

<div class="quanta-dropdown quanta-dropdown-click">
  <button class="quanta-dropdown-toggle">Click me</button>
  <div class="quanta-dropdown-menu">
    <div class="quanta-dropdown-item">Profile</div>
    <div class="quanta-dropdown-item">Settings</div>
    <div class="quanta-dropdown-item">Logout</div>
  </div>
</div>

Alignment

Control horizontal positioning of the menu with .quanta-dropdown-start (left-align) or .quanta-dropdown-end (right-align).

<div class="quanta-dropdown quanta-dropdown-click quanta-dropdown-end active">
  <button class="quanta-dropdown-toggle">End-aligned</button>
  <div class="quanta-dropdown-menu">…</div>
</div>

Dark Mode

Dropdowns automatically adapt when you set data-theme="dark" on <html>.

<html data-theme="dark">…</html>