Dropdown

Svelte

<Dropdown
  withArrows
  overshadow
  align="left|center|right"
  place="bottom|top"
  hoverable
  grow
  closeOnEscape="{false}"
  isCycleThrough="{false}"
  [...buttonProps]
>
  <span slot="dropbtn">DROPDOWN</span>

  <div class="menu">
    <div class="heading"><b>Links :</b></div>
    <hr />
    <a href="#!" class="btn text">link 1</a>
  </div>
</Dropdown>

<BtnGroup accent="">
  <Dropdown> <!--  --> </Dropdown>
  <Dropdown> <!--  --> </Dropdown>
  <Btn> <!--  --> </Btn>
</BtnGroup>

HTML

<details class="dropdown {accent} right top overshadow hoverable grow">
  <summary class="btn">
    <span>dropdown</span>

    <span class="on-open">
      <svg height="24px" width="24px" viewBox="0 0 24 24" fill="currentColor">
        <use href="#keyboard_arrow_up"></use>
      </svg>
    </span>

    <span class="on-closed">
      <svg height="24px" width="24px" viewBox="0 0 24 24" fill="currentColor">
        <use href="#keyboard_arrow_down"></use>
      </svg>
    </span>
  </summary>

  <div class="menu {accent}">
    <button class="btn text">btn</button>
    <button class="btn text colored">btn.active</button>
  </div>
</details>

Customize CSS

.dropdown {
  --dropdown-overshadow-bg: hsla(0, 0%, 0%, 0.33);
}

Close

<script>
  import Dropdown from '$lib/Dropdown.svelte'

  /** @type {Dropdown} */
  let comp
</script>

<Dropdown bind:this={comp} >
  <div class="menu">
    {#each [0,1] as _, i}
      <button
        class="btn text"
        on:click={() => {
          comp.closeMe()
        }}>button #{i}</button
      >
    {/each}
  </div>
</Dropdown>

Close dropdown utility

export function closeDropdown(id) {
  if (id) {
    document.getElementById(id)?.removeAttribute('open')
  } else {
    document.querySelectorAll('details.dropdown')?.forEach((el) => {
      el.removeAttribute('open')
    })
  }
}