Dropdown

A Dropdown is a custom select component that allows users to make single or multiple selections.

Dropdown using details

Dropdown with focus (suggested)

Dropdown with align right

Code

<details class="backoffice-dropdown">
  <summary class="backoffice-button backoffice-button-outline">Menu</summary>
  <ul class="backoffice-dropdown-content">
    <li class="backoffice-menuitem w-full">
      <a>Account</a>
    </li>
    <li class="backoffice-menuitem w-full" data-active="true">
      <a>Notifications</a>
    </li>
    <li class="backoffice-menuitem w-full">
      <a>Billing</a>
    </li>
    <li class="backoffice-menuitem w-full">
      <a>My events</a>
    </li>
    <li class="backoffice-menuitem w-full">
      <a>Upcoming events</a>
    </li>
  </ul>
</details>

Details

Attribute	Type	Description
.backoffice-dropdown	component	Dropdown component
.backoffice-dropdown-content	component	Dropdown content popup
.backoffice-dropdown-trigger	behavior	Dropdown trigger, used to open the dropdown using focus
[data-align="right"]	modifier	Dropdown content aligned to the right
[data-align="left"]	modifier	Dropdown content aligned to the left