Dropdown

Dropdown kan åpne meny eller andre elementer når en knapp blir klikket på.

Focus based

Denne dropdownen lukkes når den mister fokus. Unngå å legge elementer som kan fjerne fokuset fra dropdown-innhold. For eksempel en <dialog>.

For å lukke en dropdown etter klikk kan du bruke noe ala onclick="document.activeElement.blur()".

<div class="dropdown">
  <div tabindex="0" role="button" class="btn m-1">Click</div>
  <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Why div?
Safari has a CSS bug since 2008 that prevents button elements from being focused,
so we use div tabindex="0" as a workaround.
This approach is accessible with the addition of role="button" and functions consistently across all browsers.

Details based

details og summary er native HTML-elementer som kan brukes til å lage dropdowns.

Dropdown som bruker details og summary åpnes og lukkes når summary klikkes på. Du kan også åpne og lukke ved å bruke JS til å legge til og fjerne open på dialog-elementet.

<details class="dropdown">
  <summary class="btn m-1">open or close</summary>
  <ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</details>

Forige Drawer

Neste Fieldset