Bootstrap - Dropdowns Demo

Ethan D. - June 1, 2024

Creating a Basic Dropdown

To create a basic dropdown in Bootstrap, use the .dropdown class on a container element. Inside the container, use a <button> element to create the dropdown toggle. The button should have the .dropdown-toggle class and the data-bs-toggle="dropdown" attribute to enable the dropdown functionality.

Example

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

Element	Description
`<div>`	Has the `.dropdown` class, which creates the dropdown container.
`<button>`	Inside the container, has the `.btn` and `.btn-primary` classes to style it as a primary button. It also has the `.dropdown-toggle` class and the `data-bs-toggle="dropdown"` attribute to enable the dropdown toggle functionality.
`<ul>`	Has the `.dropdown-menu` class and creates the dropdown menu that will appear when the button is clicked.
`<li>`	Inside the dropdown menu, add dropdown items using `<li>` elements. Each `<li>` contains an `<a>` element with the `.dropdown-item` class, representing a clickable option in the dropdown menu.

When you click the button, the dropdown menu will appear below the button, showing the available options. You can then click on an option to select it.

You can customize the appearance of the dropdown button and menu items by applying additional classes or custom styles. Bootstrap provides various button styles and dropdown menu modifiers that you can use to match your design requirements.

Remember to include the necessary Bootstrap CSS and JavaScript files in your project for the dropdown to function properly.

Dropdown Variations

Bootstrap offers several variations of dropdowns that provide different functionality and appearance. Here are some of these variations.

Split Button Dropdowns

Split button dropdowns separate the button action from the dropdown toggle. They consist of a regular button on the left and a dropdown toggle button on the right. To create a split button dropdown, wrap the buttons inside a <div> element with the .btn-group class.

Example: Split Button Dropdown

<div class="btn-group">
  <button type="button" class="btn btn-primary">Action</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
    <li><a class="dropdown-item" href="#">Option 3</a></li>
  </ul>
</div>

You can style the buttons using Bootstrap's button classes.

Dropup

By default, dropdowns open downwards. However, you can modify the dropdown to open upwards by using the .dropup class. This is useful when there is not enough space below the dropdown toggle or when you want the dropdown menu to appear above the toggle.

Example: Dropup

<div class="dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
    <li><a class="dropdown-item" href="#">Option 3</a></li>
  </ul>
</div>

Dropups are commonly used in situations where the dropdown is located at the bottom of a container or when there is limited space below the dropdown.

Dropright and Dropleft

Bootstrap also provides classes to create horizontal dropdowns. The .dropend class can be used to create a dropdown that opens to the right of the toggle, while the .dropstart class creates a dropdown that opens to the left.

Example: Dropright and Dropleft

<div class="dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropright
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
    <li><a class="dropdown-item" href="#">Option 3</a></li>
  </ul>
</div>

<div class="dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropleft
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
    <li><a class="dropdown-item" href="#">Option 3</a></li>
  </ul>
</div>

These variations are useful when you want to position the dropdown menu horizontally instead of vertically.

By using these dropdown variations, you can customize the behavior and appearance of dropdowns in your Bootstrap projects to suit your specific needs.

Dropdown Alignment

Bootstrap provides classes to control the alignment of dropdown menus. By default, dropdown menus are aligned to the left side of the dropdown toggle. However, you can change the alignment using the following classes:

Aligning the Dropdown Menu to the Right

To align the dropdown menu to the right side of the toggle, add the .dropdown-menu-end class to the dropdown menu element.

Example: Right-Aligned Dropdown

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Right-Aligned Dropdown
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
    <li><a class="dropdown-item" href="#">Option 3</a></li>
  </ul>
</div>

The .dropdown-menu-end class positions the dropdown menu to the right edge of the dropdown toggle, ensuring that it aligns properly.

Centering the Dropdown Menu

To center the dropdown menu relative to the dropdown toggle, you can use the .dropdown-menu-center class.

Example: Centered Dropdown

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered Dropdown
  </button>
  <ul class="dropdown-menu dropdown-menu-center">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
    <li><a class="dropdown-item" href="#">Option 3</a></li>
  </ul>
</div>

The .dropdown-menu-center class positions the dropdown menu at the center of the dropdown toggle, providing a visually balanced alignment.

Responsive Alignment

Bootstrap also offers responsive classes for dropdown alignment. These classes allow you to change the alignment of the dropdown menu based on the screen size.

Class	Description
`.dropdown-menu-end-sm`	Aligns the dropdown menu to the right on screens wider than 576px (small breakpoint).
`.dropdown-menu-end-md`	Aligns the dropdown menu to the right on screens wider than 768px (medium breakpoint).
`.dropdown-menu-end-lg`	Aligns the dropdown menu to the right on screens wider than 992px (large breakpoint).
`.dropdown-menu-end-xl`	Aligns the dropdown menu to the right on screens wider than 1200px (extra-large breakpoint).
`.dropdown-menu-end-xxl`	Aligns the dropdown menu to the right on screens wider than 1400px (extra-extra-large breakpoint).

Example: Responsive Dropdown

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Responsive Dropdown
  </button>
  <ul class="dropdown-menu dropdown-menu-end-md">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
    <li><a class="dropdown-item" href="#">Option 3</a></li>
  </ul>
</div>

The dropdown menu will be aligned to the right on screens wider than 768px (medium breakpoint) and aligned to the left on smaller screens.

By using these alignment classes, you can control the positioning of dropdown menus in your Bootstrap projects, making them adapt to different screen sizes and layout requirements.

Dropdown Options

Bootstrap provides options to change the function and look of dropdowns. These options include dropdown headers, dividers, and disabled items.

Dropdown Headers

You can add headers to dropdown menus to group related options or provide more information. To create a dropdown header, use the .dropdown-header class on an element inside the dropdown menu.

Example: Dropdown with Header

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown with Header
  </button>
  <ul class="dropdown-menu">
    <li><h6 class="dropdown-header">Header</h6></li>
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
    <li><a class="dropdown-item" href="#">Option 3</a></li>
  </ul>
</div>

Dropdown headers are styled differently from regular dropdown items. They have a different text color and font weight to visually separate them. You can further change the look of dropdown headers by applying your own styles.

Dropdown Dividers

Dropdown dividers are horizontal lines that separate dropdown items into different sections. They help organize the dropdown menu and improve readability. To add a divider, use the .dropdown-divider class on an empty <li> element within the dropdown menu.

Example: Dropdown with Divider

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown with Divider
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Option 3</a></li>
  </ul>
</div>

Dropdown dividers are shown as thin horizontal lines. You can change their color and thickness by modifying the relevant CSS styles.

Disabled Dropdown Items

You can make dropdown items appear disabled and prevent users from clicking them. This is useful when certain options are not available or not applicable in a given context. To disable a dropdown item, add the .disabled class to the <li> element.

Example: Dropdown with Disabled Item

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown with Disabled Item
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Option 2</a></li>
    <li><a class="dropdown-item" href="#">Option 3</a></li>
  </ul>
</div>

Disabled dropdown items have a different visual style, usually with a lighter text color and a "not-allowed" cursor. They cannot be selected or clicked, and the tabindex="-1" attribute prevents them from receiving focus.

By using dropdown headers, dividers, and disabled items, you can organize and structure your dropdown menus well. These options help guide users, improve usability, and show the state and availability of different options within the dropdown.