Svelte Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Svelte dropdown plugin.

Examples

<BaseDropdown
  tagClasses="nav-item"
  tag="li"
  titleTag="a"
  titleClasses="nav-link pr-0"
  isOpen="false">
  <button
    class="btn btn-secondary dropdown-toggle"
    slot="title-container"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false">
    Regular
  </button>

  <div class="dropdown-item" href="javascript:;">Action</div>
  <div class="dropdown-item" href="javascript:;">Another action</div>
  <div class="dropdown-item" href="javascript:;">Something else here</div>
</BaseDropdown>

<BaseDropdown
  tagClasses="nav-item"
  tag="li"
  titleTag="a"
  titleClasses="nav-link pr-0"
  isOpen="false">
  <button
    class="btn btn-dark dropdown-toggle"
    slot="title-container"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false">
    <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/icons/flags/US.png">
    Flags
  </button>

  <a class="dropdown-item" href="javascript:;">
    <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/icons/flags/DE.png"> Deutsch
  </a>
  <a class="dropdown-item" href="javascript:;">
    <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/icons/flags/GB.png"> English(UK)
  </a>
  <a class="dropdown-item" href="javascript:;">
    <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/icons/flags/FR.png"> Français
  </a>
</BaseDropdown>

Colors

The best part is you can do this with any button variant, too:

<BaseDropdown
  menuClasses=""
  tagClasses="nav-item"
  tag="li"
  titleTag="a"
  titleClasses="nav-link pr-0"
  isOpen="false">
  <button
    class="btn btn-primary dropdown-toggle"
    slot="title-container"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false">
    Primary
  </button>

  <div class="dropdown-item" href="javascript:;">Action</div>
  <div class="dropdown-item" href="javascript:;">Another action</div>
  <div class="dropdown-item" href="javascript:;">Something else here</div>
</BaseDropdown>

<BaseDropdown
  menuClasses=""
  tagClasses="nav-item"
  tag="li"
  titleTag="a"
  titleClasses="nav-link pr-0"
  isOpen="false">
  <button
    class="btn btn-secondary dropdown-toggle"
    slot="title-container"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false">
    Secondary
  </button>

  <div class="dropdown-item" href="javascript:;">Action</div>
  <div class="dropdown-item" href="javascript:;">Another action</div>
  <div class="dropdown-item" href="javascript:;">Something else here</div>
</BaseDropdown>

<BaseDropdown
  menuClasses=""
  tagClasses="nav-item"
  tag="li"
  titleTag="a"
  titleClasses="nav-link pr-0"
  isOpen="false">
  <button
    class="btn btn-success dropdown-toggle"
    slot="title-container"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false">
    Success
  </button>

  <div class="dropdown-item" href="javascript:;">Action</div>
  <div class="dropdown-item" href="javascript:;">Another action</div>
  <div class="dropdown-item" href="javascript:;">Something else here</div>
</BaseDropdown>

<BaseDropdown
  menuClasses=""
  tagClasses="nav-item"
  tag="li"
  titleTag="a"
  titleClasses="nav-link pr-0"
  isOpen="false">
  <button
    class="btn btn-info dropdown-toggle"
    slot="title-container"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false">
    Info
  </button>

  <div class="dropdown-item" href="javascript:;">Action</div>
  <div class="dropdown-item" href="javascript:;">Another action</div>
  <div class="dropdown-item" href="javascript:;">Something else here</div>
</BaseDropdown>

<BaseDropdown
  menuClasses=""
  tagClasses="nav-item"
  tag="li"
  titleTag="a"
  titleClasses="nav-link pr-0"
  isOpen="false">
  <button
    class="btn btn-warning dropdown-toggle"
    slot="title-container"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false">
    Warning
  </button>

  <div class="dropdown-item" href="javascript:;">Action</div>
  <div class="dropdown-item" href="javascript:;">Another action</div>
  <div class="dropdown-item" href="javascript:;">Something else here</div>
</BaseDropdown>

<BaseDropdown
  menuClasses=""
  tagClasses="nav-item"
  tag="li"
  titleTag="a"
  titleClasses="nav-link pr-0"
  isOpen="false">
  <button
    class="btn btn-danger dropdown-toggle"
    slot="title-container"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false">
    Danger
  </button>

  <div class="dropdown-item" href="javascript:;">Action</div>
  <div class="dropdown-item" href="javascript:;">Another action</div>
  <div class="dropdown-item" href="javascript:;">Something else here</div>
</BaseDropdown>