Dropdowns

Provides styles for dropdowns across browsers.

A dropdown is a button with some markup to display a list of additional actions. They are not to be confused with selectors which are a type of form field. The dropdown is styled using a parent .dropdown class.

The dropdown toggle button supports both <a> and <button> elements and is styled using the .dropdown__toggle class.

States

Inactive and active dropdown state.

Item 1 Item 2 Item 3
Dropdown
Item 1 Item 2 Item 3
<div class="dropdown"> <button class="btn dropdown__toggle" type="button" data-toggle="dropdown" aria-haspopup="true" data-placement="left"> Dropdown </button> <div class="dropdown__menu" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div> </div> <div class="dropdown show"> <a href="#" class="btn dropdown__toggle active" data-toggle="dropdown" aria-haspopup="true"> Dropdown </a> <div class="dropdown__menu show" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div> </div>

When a dropdown menu item is selected, its value updates the dropdown toggle button to reflect the change. The item is styled using the .active class. To enable selectable menu items use the data-selectable="true" attribute on the toggle element.

Item 1 Item 2 Item 3
<div class="dropdown"> <button class="btn dropdown__toggle" type="button" data-toggle="dropdown" aria-haspopup="true" data-selectable="true"> Select item </button> <div class="dropdown__menu" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div> </div>

Dropdown toggle button will take the needed width for the buton text. If the container width is smaller than the needed then the button text will be truncated and end with ....

Item 1 Item 2 Item 3
<div class="dropdown"> <button class="btn dropdown__toggle" type="button" data-toggle="dropdown" aria-haspopup="true"> Nulla a risus ut nunc imperfecto chango lumos humos </button> <div class="dropdown__menu" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div> </div>

The dropdown can be disabled. For that the dropdown toggle button must use the disabled attribute and it will be styled with button disabled state.

Item 1 Item 2 Item 3
<div class="dropdown"> <button class="btn dropdown__toggle" type="button" data-toggle="dropdown" aria-haspopup="true" disabled> Dropdown </button> <div class="dropdown__menu" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div> </div>

The dropdown menu is styled using the .dropdown__menu class. The dropdown menu items are styled using the .dropdown__item class. Some special menu items like divider and header are also available.

Item 1 Item 2 Item 3
<div class="dropdown__menu show" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div>

Apply the .active class to a dropdown menu item to select it.

Item 1 Item 2 Item 3
<div class="dropdown__menu show" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item active">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div>

Dropdown menu items can be disabled using the .disabled class.

Item 1 Item 2 Item 3
<div class="dropdown__menu show" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item disabled">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div>

The dropdown divider is a special item that can be placed in between normal items to separate them. It is styled using the .dropdown__divider class.

Item 1 Item 2 Item 3
Separated Link
<div class="dropdown__menu show" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> <div class="dropdown__divider"></div> <a href="#" class="dropdown__item">Separated Link</a> </div>

Another special item is the dropdown header. It can also be placed in between normal items to show information or group items. It is styled using the .dropdown__header class.

Menu Header
Item 1 Item 2 Item 3
<div class="dropdown__menu show" aria-labelledby="dropdownMenuButton"> <h6 class="dropdown__header">Menu Header</h6> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div>

Although dropdown checkbox is not a special type of checkbox it is needed to properly list checkboxes in a dropdown menu. It can also be placed in between normal items.

<div class="dropdown__menu show" aria-labelledby="dropdownMenuButton"> <div class="dropdown__item form-control-checkbox"> <input type="checkbox" id="check1"> <label for="check1">Item 1</label> </div> <div class="dropdown__item form-control-checkbox"> <input type="checkbox" id="check2" checked> <label for="check2">Item 2</label> </div> <div class="dropdown__item form-control-checkbox"> <input type="checkbox" id="check3"> <label for="check3">Item 3</label> </div> </div>

Avoid menu items that wrap more than 2 lines.

Lorem ipsum dolor sit amet, consectetur adipiscing elit... Item 2 Item 3
<div class="dropdown__menu show" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div>

The dropdown menu is limited to a maximum height of 225px. When items can not fit on that space, the menu will allow to scroll for the other items.

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9
<div class="dropdown__menu show"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> <a href="#" class="dropdown__item">Item 4</a> <a href="#" class="dropdown__item">Item 5</a> <a href="#" class="dropdown__item">Item 6</a> <a href="#" class="dropdown__item">Item 7</a> <a href="#" class="dropdown__item">Item 8</a> <a href="#" class="dropdown__item">Item 9</a> </div>

Variants

The dropdown toggle button can be styled with the different button variants using the button classes like .btn .btn--primary for the primary variant. Check Buttons atom for more information.

Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
<div class="dropdown"> <button class="btn dropdown__toggle" type="button" data-toggle="dropdown" aria-haspopup="true"> Default </button> <div class="dropdown__menu" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div> </div> <div class="dropdown"> <button class="btn btn--primary dropdown__toggle" type="button" data-toggle="dropdown" aria-haspopup="true"> Primary </button> <div class="dropdown__menu" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div> </div> <div class="dropdown"> <button class="btn btn--secondary dropdown__toggle" type="button" data-toggle="dropdown" aria-haspopup="true"> Secondary </button> <div class="dropdown__menu" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div> </div> <div class="dropdown"> <button class="btn btn--neutral dropdown__toggle" type="button" data-toggle="dropdown" aria-haspopup="true"> Neutral </button> <div class="dropdown__menu" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div> </div>

Sizes

The size of the toggle button can be adjusted using the button size variants like .btn--sm for small buttons and .btn--lg for large buttons.

Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
<div class="dropdown"> <button class="btn btn--sm dropdown__toggle" type="button" data-toggle="dropdown" aria-haspopup="true"> Dropdown </button> <div class="dropdown__menu" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div> </div> <div class="dropdown"> <button class="btn dropdown__toggle" data-toggle="dropdown" aria-haspopup="true"> Dropdown </button> <div class="dropdown__menu" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div> </div> <div class="dropdown"> <button class="btn btn--lg dropdown__toggle" data-toggle="dropdown" aria-haspopup="true"> Dropdown </button> <div class="dropdown__menu" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div> </div>

The dropdown can be styled as a block element that takes the full width of its parent using the .dropdown--block class along with the .dropdown class.

Item 1 Item 2 Item 3
<div class="dropdown dropdown--block"> <button class="btn dropdown__toggle" type="button" data-toggle="dropdown" aria-haspopup="true"> Dropdown </button> <div class="dropdown__menu" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div> </div>

Overlay

The dropdown can be used along with an overlay to cover all the page with the exception of its own dropdown. The dropdown overlay is added providing a <div> with .dropdown__overlay class as a child of the root .dropdown.

Item 1 Item 2 Item 3
<div class="dropdown"> <button class="btn dropdown__toggle" type="button" data-toggle="dropdown" aria-haspopup="true"> Dropdown </button> <div class="dropdown__overlay"></div> <div class="dropdown__menu" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div> </div>

Flip behavior

Dropdown menu will by default flip its menu when there is no room to fit it. By exmaple, if the page is scrolled to a point where the menu reaches the bottom of the page, then the menu will be placed above the dropdown button instead. This behavior can be disabled using the data-flip="disabled" data attribute on the dropdown button element.

Item 1 Item 2 Item 3
<div class="dropdown"> <button class="btn dropdown__toggle" type="button" data-toggle="dropdown" aria-haspopup="true" data-flip="disabled"> Dropdown without flip </button> <div class="dropdown__menu" aria-labelledby="dropdownMenuButton"> <a href="#" class="dropdown__item">Item 1</a> <a href="#" class="dropdown__item">Item 2</a> <a href="#" class="dropdown__item">Item 3</a> </div> </div>

Download bundles

Download css Download js

results matching ""

    No results matching ""