Code has been added to clipboard!

Create and Style Bootstrap Dropdown Menus for a Cleaner Website Look

Reading time 4 min
Published Nov 10, 2017
Updated Oct 9, 2019

A great tool for keeping the interface structured and neat is the Bootstrap dropdown menu. With this feature, you can organize many groups of lists.

Bootstrap dropdowns are customizable and can be modified to suit any page. In this tutorial, we cover the topics of creating and modifying Bootstrap dropdown menus.

Bootstrap Dropdown: Main Tips

  • Using Bootstrap 4, you can create dropdown menus.
  • A dropdown is a toggleable menu, which allows you to place more options in a menu without cluttering the interface.
  • Dropdowns can contain buttons, links or plain text.

Creating a Dropdown

Example
<div class="dropdown">
 <button class="btn-success btn dropdown-toggle" type="button" data-toggle="dropdown">
 Click on me
 </button>
 <div class="dropdown-menu">
  <a href="#" class="dropdown-item">Cats</a>
  <a href="#" class="dropdown-item">Dogs</a>
  <a href="#" class="dropdown-item">Rabbits</a>
  <a href="#" class="dropdown-item">Alpacas</a>
 </div>
</div>

Here is a list of steps, depicted in the code example above:

  1. Generating a basic dropdown requires you to create a button using .btn and .dropdown-toggle classes.
  2. You should also add the .data-toggle attribute with the .dropdown value.
  3. Then, you need to create a <div> container with the .dropdown-menu class. Inside it there should be <a> elements - links with the .dropdown-item class.
  4. This will create a basic dropdown menu.

Divider

A dropdown divider is similar to the <hr /> element since it creates a thin horizontal line. However, this divider appears inside Bootstrap dropdown menus.

Quick Tip: dividers allow you to visually separate certain options from others.

Example
<div class="dropdown">
  <button class="btn-success btn dropdown-toggle" type="button" data-toggle="dropdown">
  Click on me
  </button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Cats</a>
    <a href="#" class="dropdown-item">Dogs</a>
    <a href="#" class="dropdown-item">Rabbits</a>
    <a href="#" class="dropdown-item">Alpacas</a>
      <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">Penguins</a>
    <a href="#" class="dropdown-item">Ostriches</a>
  </div>
</div>

To create a dropdown divider, you need to create a <div> container with the .dropdown-divider class inside the dropdown menu container (between the links you'd like to separate).

Header

Dropdown headers can be added by creating a <div> container inside the .dropdown-menu container, and applying a .dropdown-header class to it. An example provided will show you how it's done:

Example
<div class="dropdown">
  <button class="btn-success btn dropdown-toggle" type="button" data-toggle="dropdown">
  Click on me
  </button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Cats</a>
    <a href="#" class="dropdown-item">Dogs</a>
    <a href="#" class="dropdown-item">Rabbits</a>
    <a href="#" class="dropdown-item">Alpacas</a>
      <div class="dropdown-divider"></div>
      <div class="dropdown-header">Others</div>
    <a href="#" class="dropdown-item">Penguins</a>
    <a href="#" class="dropdown-item">Ostriches</a>
  </div>
</div>

Active/Disabled Links

To make a link inside a dropdown menu appear active, you will need to apply the .active class. To disable one, .disabled class should be used. See the code example below and run it in the code editor to see the difference:

Example
<div class="dropdown">
  <button class="btn-success btn dropdown-toggle" type="button" data-toggle="dropdown">
  Click on me
  </button>
  <div class="dropdown-menu">
    <a href="#" class="active dropdown-item">Cats</a>
    <a href="#" class="dropdown-item">Dogs</a>
    <a href="#" class="dropdown-item">Rabbits</a>
    <a href="#" class="dropdown-item">Alpacas</a>
      <div class="dropdown-divider"></div>
      <div class="dropdown-header">Others</div>
    <a href="#" class="disabled dropdown-item">Penguins</a>
    <a href="#" class="dropdown-item">Ostriches</a>
  </div>
 </div>

Types Of Display

Bootstrap dropdown menus can also be styled by modifying where and how they appear. See the various types of display and choose whichever suits your website best.

Left/Right Dropdown

You can create a dropright or dropleft menu by adding the .dropright or .dropleft class to the dropdown element. Note that the caret/arrow is added automatically:

Example
<div class="dropdown dropright">
  <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
  Click on me
  </button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Cats</a>
    <a href="#" class="dropdown-item">Dogs</a>
    <a href="#" class="dropdown-item">Rabbits</a>
    <a href="#" class="dropdown-item">Alpacas</a>
  </div>
</div>

Right Button Corner

It is possible to make the dropdown appear from the right corner of the button.

You can achive this by using the .dropdown-menu-right with the .dropdown-menu class on the <div> container that has the dropdown content inside. See the HTML document below to understand how it should look like in your code:

Example
<div class="dropdown">
  <button class="btn-success btn dropdown-toggle" type="button" data-toggle="dropdown">
  Click on me and notice the position of the menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <a href="#" class="active dropdown-item">Cats</a>
    <a href="#" class="dropdown-item">Dogs</a>
    <a href="#" class="dropdown-item">Rabbits</a>
    <a href="#" class="dropdown-item">Alpacas</a>
  </div>
</div>

Above Button

You can make the dropdown menu appear above the button that toggles its visibility.

This usually proves useful when your buttons are at the end of the page. Achieve this by simply adding the .dropup class to the element with the .dropdown class. See the example below and try to run it in our code editor:

Example
<div class="dropdown dropup" style="padding-top:200px">
  <button class="btn-success btn dropdown-toggle" type="button" data-toggle="dropdown">
  Click on me
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <a href="#" class="active dropdown-item">Cats</a>
    <a href="#" class="dropdown-item">Dogs</a>
    <a href="#" class="dropdown-item">Rabbits</a>
    <a href="#" class="dropdown-item">Alpacas</a>
  </div>
</div>

Side Of The Button

By using .dropdown-toggle-split class on the button that toggles the dropdown menu's visibility, you can also make it dropdown from the side of the button. This is what it would look like in your HTML document:

Example
<div class="dropdown">
  <div class="btn-group">
  <button class="btn-success btn" type="button">Click on me</button>
  <button class="btn-success btn dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown"></button>
  <div class="dropdown-menu dropdown-menu-right">
    <a href="#" class="active dropdown-item">Cats</a>
    <a href="#" class="dropdown-item">Dogs</a>
    <a href="#" class="dropdown-item">Rabbits</a>
    <a href="#" class="dropdown-item">Alpacas</a>
  </div>
</div>

Button Group Dropdowns

As we were covering Bootstrap button groups, we also explained how to use them to create dropdown menus. Let's see a simple example to refresh your memory - just so you are aware of all options:

Example
<div class="btn-group">
  <button type="button" class="btn btn-danger">Cats</button>
  <button type="button" class="btn btn-danger">Dogs</button>
  <div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    Other
    </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Penguins</a>
    <a class="dropdown-item" href="#">Ostriches</a>
  </div>
  </div>
</div>

You can apply dropdown menus to a vertical button group:

Example
<div class="btn-group-vertical">
  <button type="button" class="btn btn-danger">Cats</button>
  <button type="button" class="btn btn-danger">Dogs</button>
  <div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    Other
    </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Penguins</a>
    <a class="dropdown-item" href="#">Ostriches</a>
  </div>
  </div>
</div>

Plain Text In A Dropdown

In some cases, you might need to add plain text (not a link or a button a user can select) into your Bootstrap dropdown menu. See the example below to get the idea:

Example
<div class="dropdown">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Click on me</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Cats</a>
    <a class="dropdown-item" href="#">Dogs</a>
    <a class="dropdown-item-text" href="#">Link</a>
    <span class="dropdown-item-text">Plain text</span>
  </div>
</div>

Bootstrap Dropdown: Summary

  • Bootstrap 4 helps you create dropdown menus that display plain text, buttons or links.
  • A dropdown menu is toggleable and allows you to provide the menu with more options.
  • Using dropdown keeps the overall interface cleaner.
Learn Bootstrap
Tutorial
Fonts
Tables
Images
Jumbotron
Alerts
Colors
Button Class
Button Groups
Badges
Progress Bars
Pagination
List Groups
Cards
Dropdown
Accordion
Tabs
Navbar
Forms
Input
Carousel
Modal
Tooltip
Popover
Scrollspy
Utility Classes
Grid: Introduction
Grid System
Horizontal Grid
Extra Small Grid
Small Grid
Medium Grid
Large Grid
Extra Large Grid
Grid Example