Dropdown Panel Demo

Features

Lightweight and customizable
Hover or click activation
Use either dropdown-panel or dropdown-menu elements for different styles.
Keyboard accessible
WAI-ARIA compliant
No dependencies

How to Use

<dropdown-component>
  <dropdown-trigger>Menu Label</dropdown-trigger>
  <dropdown-panel>
    <a href="#" class="dropdown-item">Option 1</a>
    <a href="#" class="dropdown-item">Option 2</a>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">Option 3</a>
  </dropdown-panel>
</dropdown-component>

Use a dropdown-menu instead of a dropdown-panel to get a larger "mega-menu" style of dropdown.

<dropdown-component>
  <dropdown-trigger>Menu Label</dropdown-trigger>
  <dropdown-menu>
    <a href="#" class="dropdown-item">Option 1</a>
    <a href="#" class="dropdown-item">Option 2</a>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">Option 3</a>
  </dropdown-menu>
</dropdown-component>