New This website is new, your feedback will help us to improve it.

Drop down

Overview

Use the .bsk-dropdown and .data-dropdown classes to create a menu that appears when triggered by a supported element.

Drop-down menus are a elements, containing a set of links and other components.


Interactive drop-downs require the Javascript for the BAS style kit to be included on the page.

Supported elements

Button drop-down

<div data-dropdown-wrapper class="bsk-dropdown">
  <button data-dropdown-toggle class="bsk-btn bsk-btn-primary hover:underline">
      Dropdown
      <svg class="arrow transform transition-transform w-5 h-5 ml-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
  </button>
  <div data-dropdown-menu class="hidden absolute rounded-lg z-50 py-1 px-2 shadow-lg translate-y-1 translate-x-7">
      <div class="py-1" role="menu">
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50 hover:text-blue-950">Action 1</a>
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 2</a>
      </div>
  </div>
</div>

Split-button drop-down

<div data-dropdown-wrapper class="bsk-dropdown flex">
  <button class="bsk-btn bsk-btn-primary rounded-e-none! hover:underline">
      Dropdown
  </button>
  <button data-dropdown-toggle class="bsk-btn bsk-btn-primary rounded-s-none! hover:underline">        
      <svg class="arrow transform transition-transform w-5 h-5 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
  </button>
  <div class="block">
      <div data-dropdown-menu class="hidden absolute rounded-lg z-50 py-1 px-2 shadow-lg translate-y-11 -translate-x-28">
          <div class="py-1" role="menu">
              <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50 hover:text-blue-950">Action 1</a>
              <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 2</a>
          </div>
      </div>
  </div
  <br>
</div>

See the navbar documentation for using drop-downs in Navbar items.

Variants

Default drop-down

<div data-dropdown-wrapper class="bsk-dropdown">
  <button data-dropdown-toggle class="bsk-btn bsk-btn-primary hover:underline">
      Dropdown
      <svg class="arrow transform transition-transform w-5 h-5 ml-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
  </button>
  <div data-dropdown-menu class="hidden absolute rounded-lg z-50 py-1 px-2 shadow-lg translate-y-1 translate-x-7">
      <div class="py-1" role="menu">
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50 hover:text-blue-950">Action 1</a>
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 2</a>
      </div>
  </div>
</div>

Reverse drop-down

<div data-dropdown-wrapper class="bsk-dropdown">
  <button data-dropdown-toggle class="bsk-btn bsk-btn-primary hover:underline">
      Dropup
      <svg class="arrow transform transition-transform w-5 h-5 ml-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" transform="rotate(180 12 12)" />
      </svg>
  </button>
  <div data-dropdown-menu class="hidden absolute rounded-lg z-50 py-1 px-2 shadow-lg -translate-y-36 translate-x-2">
      <div class="py-1" role="menu">
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50 hover:text-blue-950">Action 1</a>
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 2</a>
      </div>
  </div>
</div>

Components

The hidden class is removed from this example to show the menu open with links





<div data-dropdown-wrapper class="bsk-dropdown">
  <button data-dropdown-toggle class="bsk-btn bsk-btn-primary hover:underline">
      Dropdown
      <svg class="arrow transform transition-transform w-5 h-5 ml-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
  </button>
  <div data-dropdown-menu class="absolute rounded-lg z-50 py-1 px-2 shadow-lg translate-y-1 translate-x-7">
      <div class="py-1" role="menu">
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50 hover:text-blue-950">Action 1</a>
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 2</a>
      </div>
  </div>
</div>
<br>
<br>
<br>
<br>

Divider

The hidden class is removed from this example to show the menu open with a divider







<div data-dropdown-wrapper class="bsk-dropdown">
  <button data-dropdown-toggle class="bsk-btn bsk-btn-primary hover:underline">
      Dropdown
      <svg class="arrow transform transition-transform w-5 h-5 ml-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
  </button>
  <div data-dropdown-menu class="absolute rounded-lg z-50 py-1 px-2 shadow-lg translate-y-1 translate-x-7">
      <div class="py-1" role="menu">
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50 hover:text-blue-950">Action 1</a>
          <hr>
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 2</a>
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 3</a>
      </div>
  </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>

The hidden class is removed from this example to show the menu open with a divider








<div data-dropdown-wrapper class="bsk-dropdown">
  <button data-dropdown-toggle class="bsk-btn bsk-btn-primary hover:underline">
      Dropdown
      <svg class="arrow transform transition-transform w-5 h-5 ml-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
  </button>
  <div data-dropdown-menu class="absolute rounded-lg z-50 py-1 px-2 shadow-lg translate-y-1 translate-x-7">
      <div class="py-1" role="menu">
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50 hover:text-blue-950">Action 1</a>
          <header>Title</header>
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 2</a>
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 3</a>
      </div>
  </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

States

Active item

If used within the Navbar component, add the .bsk-active class to the drop-down menu item currently active, to highlight where the end user is in the site.

Make sure to include a <span class="sr-only">(current)</span> element as well. This provides a non-visual indication of the currently active item, suitable for assistive technologies.





<div data-dropdown-wrapper class="bsk-dropdown">
  <button data-dropdown-toggle class="bsk-btn bsk-btn-primary hover:underline">
      Dropdown
      <svg class="arrow transform transition-transform w-5 h-5 ml-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
  </button>
  <div data-dropdown-menu class="absolute rounded-lg z-50 py-1 px-2 shadow-lg translate-y-1 translate-x-1">
      <div class="py-1" role="menu">
          <a href="#" class="bsk-active block rounded px-3 py-2 hover:bg-slate-50 hover:text-blue-950"><span class="sr-only">(current)</span>Action 1 - (current)</a>
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 2</a>
      </div>
  </div>
</div>
<br>
<br>
<br>
<br>

Disabled item

It is not safe to rely on this state to prevent users activating disabled actions





<div data-dropdown-wrapper class="bsk-dropdown">
  <button data-dropdown-toggle class="bsk-btn bsk-btn-primary hover:underline">
      Dropdown
      <svg class="arrow transform transition-transform w-5 h-5 ml-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
  </button>
  <div data-dropdown-menu class="absolute rounded-lg z-50 py-1 px-2 shadow-lg translate-y-1 translate-x-1">
      <div class="py-1" role="menu">
          <a class="bsk-disabled block rounded px-3 py-2 hover:bg-slate-50 hover:text-blue-950"><span class="sr-only">(current)</span>Action 1 - (current)</a>
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 2</a>
      </div>
  </div>
</div>
<br>
<br>
<br>
<br>

Layouts

Generally the menu is left aligned. Use the translate-<> classes to move it. The button arrow can also be rotated.

This example shows the menu aligned to the right edge of the button



<div data-dropdown-wrapper class="bsk-dropdown">
  <button data-dropdown-toggle class="bsk-btn bsk-btn-primary hover:underline">
      Dropdown
      <svg class="arrow transform transition-transform w-5 h-5 ml-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"  transform="rotate(-90 12 12)" />
      </svg>
  </button>
  <div data-dropdown-menu class="absolute rounded-lg z-50 py-1 px-2 shadow-lg -translate-y-11 translate-x-36">
      <div class="py-1" role="menu">
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50 hover:text-blue-950">Action 1</a>
          <a href="#" class="block rounded px-3 py-2 hover:bg-slate-50">Action 2</a>
      </div>
  </div>
</div>
<br>
<br>