Skip to main content
Experimental This website is used for testing – your feedback will help us to improve it.

Drop down

Overview

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

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

Interactive drop-downs require the drop-down JavaScript plugin, which is enabled on this site.

Supported elements

Button drop-down

<div class="bsk-dropdown">
  <button class="bsk-btn bsk-btn-default bsk-dropdown-toggle" type="button" id="dropdown-menu-1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown <span class="bsk-caret"></span>
  </button>
  <ul class="bsk-dropdown-menu" aria-labelledby="dropdown-menu-1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
  </ul>
</div>

Split-button drop-down

<div class="bsk-btn-group">
  <button class="bsk-btn bsk-btn-default" type="button">Dropdown</button>
  <button class="bsk-btn bsk-btn-default bsk-dropdown-toggle" type="button" id="dropdown-menu-1a" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="bsk-caret"></span>
    <span class="bsk-visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="bsk-dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
  </ul>
</div>

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

Variants

Default drop-down

<div class="bsk-dropdown">
  <button class="bsk-btn bsk-btn-default bsk-dropdown-toggle" type="button" id="dropdown-menu-2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown <span class="bsk-caret"></span>
  </button>
  <ul class="bsk-dropdown-menu" aria-labelledby="dropdown-menu-2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
  </ul>
</div>

Reverse drop-down

Use the .bsk-dropup class, rather than .bsk-dropdown to have the drop-down menu open upwards.

<div class="bsk-dropup">
  <button class="bsk-btn bsk-btn-default bsk-dropdown-toggle" type="button" id="dropdown-menu-3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropup <span class="bsk-caret"></span>
  </button>
  <ul class="bsk-dropdown-menu" aria-labelledby="dropdown-menu-3">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
  </ul>
</div>

Components

<div class="bsk-dropdown bsk-docs-dropdown-example">
  <ul class="bsk-dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
  </ul>
</div>

Divider

Use the .bsk-dropdown-divider class on a drop-down item.

<div class="bsk-dropdown bsk-docs-dropdown-example">
  <ul class="bsk-dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><hr class="bsk-dropdown-divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Use the .bsk-dropdown-header class on a drop-down item.

<div class="bsk-dropdown bsk-docs-dropdown-example">
  <ul class="bsk-dropdown-menu">
    <li><a href="#">Action</a></li>
    <li class="bsk-dropdown-header">Dropdown header</li>
    <li><a href="#">Another action</a></li>
  </ul>
</div>

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="bsk-visually-hidden">(current)</span> element as well.
This provides a non-visual indication of the currently active item, suitable for assistive technologies.

Heads up! Active drop-down item elements are not yet fully styled, but will be in the next version of the Style Kit.

<div class="bsk-dropdown bsk-docs-dropdown-example">
  <ul class="bsk-dropdown-menu">
    <li class="bsk-active"><span class="bsk-visually-hidden">(current)</span><a href="#">Active Action</a></li>
    <li><a href="#">Another action</a></li>
  </ul>
</div>

Disabled item

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

Browsers may not enforce these properties, or users may trivially edit the DOM. Server side protections must be used for dangerous actions.

<div class="bsk-docs-dropdown-example">
  <ul class="bsk-dropdown-menu">
    <li class="bsk-disabled"><a href="#" class="bsk-disabled">Disabled Action</a></li>
    <li><a href="#">Another action</a></li>
  </ul>
</div>

Layouts

Add the .bsk-dropend class to right align the drop-down menu supported element, by default the menu is left aligned.

Other alignments are available too: https://getbootstrap.com/docs/5.2/components/dropdowns/#directions

<div class="bsk-dropdown bsk-dropend">
  <button class="bsk-btn bsk-btn-default bsk-dropdown-toggle" type="button" id="dropdown-menu-4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown (right aligned) <span class="bsk-caret"></span>
  </button>
  <ul class="bsk-dropdown-menu bsk-dropdown-menu-right" aria-labelledby="dropdown-menu-4">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
  </ul>
</div>