Utilizor
HomeBootstrap 5 BasicsBS5 Dropdowns

BBS5 Dropdowns

Learn how to create dropdown menus.

BS5 Dropdowns

Dropdowns are toggleable, contextual menus for displaying lists of links.

To create a dropdown, wrap the toggle (button/link) and the menu (list) within a .dropdown class.

Add the .dropdown-toggle class to the button, and data-bs-toggle="dropdown".

Add the .dropdown-menu class to the list of items (<ul>), and .dropdown-item to each list item.

Dropdown Divider

The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal border.

Examples

Basic Dropdown

html/css

A standard button dropdown.

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
</div>

Dropdown Divider

html/css

Separating items with a line.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Link 1</a></li>
  <li><a class="dropdown-item" href="#">Link 2</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Dropdown Header

html/css

Adding headers to dropdown sections.

<ul class="dropdown-menu">
  <li><h5 class="dropdown-header">Dropdown header</h5></li>
  <li><a class="dropdown-item" href="#">Link 1</a></li>
</ul>

Test Your Knowledge

1. Which attribute triggers the dropdown menu?

2. Which class is used for dropdown items?