Dropdown Panel Demo

Features

Lightweight and customizable
Hover or click activation
Supports both compact popover and full-width mega menu styles using the wide attribute
Keyboard accessible
Follows accessibility best practices
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>

Add the wide attribute to get a full-width "mega-menu" style dropdown.

<dropdown-component>
  <dropdown-trigger>Menu Label</dropdown-trigger>
  <dropdown-panel wide>
    <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>