The Dropdown in Bootstrap 4

The Bootstrap 4 dropdown component may contain the list of links and more that can be used as contextual menus, in navbars etc. The dropdown menu can be opened by a clicking on a button or link (also split buttons) and these are toggleable.

An example of contextual menu usage can be using the dropdown menu in a textarea with different editing options. Similarly, using this in an editable table for adding/deleting or updating records.

In the navbars, the dropdowns can be used for containing a list of links for certain category etc. See the following section for learning how to create the dropdown component independently and in other components in Bootstrap 4.

A simple example of button dropdown

Let me start with a simple example of creating a dropdown by using a <button> tag with .btn and a contextual class.

The button is toggleable and as you click this, it will open the list of links. First, have a look at the demo and I will explain how it worked:

See online demo and code

The markup for this demo:

Open Web Tutorials

</button>

<a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a>

<a class="dropdown-item" href="https://www.jquery-az.com/jquery-tips/">jQuery</a>

</div>

So, how this example worked?

First of all, you need to include the Bootstrap CSS, jQuery, popper.js and Bootstrap JS files. If you have worked with previous versions of Bootstrap (or specifically Bootstrap 3 dropdowns) then you already familiar with three files inclusion except for the Popper.js (or Popper.min.js).

You may see all CDN links in the <head> section of the example page.

The Popper.js file is used to provide the dynamic positioning and viewport detection. You must include this before Bootstrap.js file.

In the mark up section, a <div> is given the .dropdown class that contains button and links markup.

The button is created by standard .btn class along with contextual class and .dropdown-toggle class. The last class adds an arrow in the button. If you omit this, the dropdown still works.

Besides, you can also see three data attributes in the <button> i.e. data-toggle=”dropdown”, aria-haspopup=”true” and aria-expanded=”false”.

Next <div> is given the .dropdown-menu class that contains links for button dropdown menu. This <div> is linked by aria-labelledby which value is equal to the ID of button.

The <a> tags are given the .dropdown-item item class.

The example of link dropdown

As mentioned earlier, you may also create a link dropdown rather than a button. See the example below with code:

See online demo and code

The HTML code:

<h3>A demo of link dropdown</h3>

Web Tutorials

</a>

<a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a>

<a class="dropdown-item" href="https://www.jquery-az.com/jquery-tips/">jQuery</a>

</div>

Dropping the menu links upward example

By default, as you click the button or link dropdown, the menu opens in downward direction. You may also open this in other directions.

For that, simply add the .dropup class in the main div element that contains button.

See online demo and code

Only this line of code is changed than the first dropdown menu example:

<div class=”dropdown dropup”>

Similarly, you may open the menu towards left or right by using dropleft and dropright classes, respectively. The above markup will be:

For left drop:

<div class=”dropdown dropleft”>

For right drop:

<div class=”dropdown dropright”>

Using buttons for menu items rather links example

This is another difference between the Bootstrap 3 dropdowns that version 4 allows using the <button> tags for creating menu items rather than just the link <a> tags as used in above examples.

In the following examples, the <button> tags are used as link items markup:

See online demo and code

The example markup:

Perform Some Action

</button>

<button class="dropdown-item" type="button">Paste</button>

<button class="dropdown-item" type="button">Select</button>

<button class="dropdown-item" type="button">Select All</button>

</div>

Creating split button dropdown menu

You may also create split button dropdown by using another <button> and specifying .dropdown-toggle-split class.

In this example, the dropdown opens as you click on the split button (the button towards right with an arrow) while the first button is given the caption.

See online demo and code

The code:

<h3>A demo of split button dropdown</h3>

<button type="button" class="btn btn-danger">All Tutorials</button>

<span class="sr-only">Toggle</span>

</button>

<a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a>

<a class="dropdown-item" href="https://www.jquery-az.com/jquery-tips/">jQuery</a>

</div>

Opening dropdown as any button is clicked example

You may also display the dropdown menu by using both buttons in case you are using split button. In the above example, the dropdown menu opened for right split button while nothing happened as you press the button with text.

In this example, both buttons display the dropdown menu:

See online demo and code

Only this piece of code is added in the first button markup:

<button type="button" class="btn btn-danger" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All Tutorials</button>

See the complete code in the demo page.

Multi-colored dropdown buttons demo

By using the contextual classes of the buttons in Bootstrap 4, you may create beautiful looking dropdown buttons in various colors. Following built-in contextual classes can be used for styling the buttons:

btn-primary
btn-secondary
btn-success
btn-info
btn-light
btn-dark
btn-danger
btn-warning

See the following example where I used all these button contextual classes for creating the dropdowns:

See online demo and code

The demo of creating outline style button dropdowns

Similarly, you may use the .outline classes of the buttons for creating dropdowns without background colors initially. These are buttons with bordered style and as you bring the mouse over, it displays the context background color.

The following outline classes can be used that are built-in in Bootstrap 4:

btn-outline-warning
btn-outline-danger
btn-outline-dark
btn-outline-light
btn-outline-info
btn-outline-success
btn-outline-secondary
btn-outline-primary

Have a look at this demo where I used all these classes:

See online demo and code

The example markup for .btn-outline-danger class:

Open Web Tutorials

</button>

<a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a>

<a class="dropdown-item" href="https://www.jquery-az.com/jquery-tips/">jQuery</a>

</div>

You may grab the complete code from the example page.

A few more styles for split buttons

Now, see various combinations for the split button styles for dropdowns – all created by using built-in button classes.

See online demo and code

Two of the button’s markup:

<button type="button" class="btn btn-outline-danger">All Tutorials</button>

<span class="sr-only">Toggle</span>

</button>

</div>

<button type="button" class="btn btn-light">All Tutorials</button>

<span class="sr-only">Toggle</span>

</button>

</div>

See the code of all styles in the example page. Only first button’s code contains dropdown menu links.

Various size dropdown examples

Extending the above example, now see the various sizes of buttons – again by using the following built classes for buttons in BS4:

btn-lg //for large size
btn-sm //for small size

See online demo and code

The code of first three buttons with all sizes:

<button type="button" class="btn btn-outline-danger btn-lg" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All Tutorials</button>

<span class="sr-only">Toggle</span>

</button>

<a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a>

<a class="dropdown-item" href="https://www.jquery-az.com/jquery-tips/">jQuery</a>

</div>

<button type="button" class="btn btn-danger">All Tutorials</button>

<span class="sr-only">Toggle</span>

</button>

</div>

<button type="button" class="btn btn-success btn-sm">All Tutorials</button>

<span class="sr-only">Toggle</span>

</button>

</div>

See the code of all 12 buttons in the demo page’s code sections.

Place dividers between menu items

You may require differentiating certain menu items from the others. For that, you may use the .dropdown-divider class for adding a separator line:

See online demo and code

The markup for this demo:

All Tutorials

</button>

<a class="dropdown-item" href="https://www.jquery-az.com/python-tutorials/">Python Tutorials</a>

<a class="dropdown-item" href="https://www.jquery-az.com/java-tutorials/">Java Tutorials</a>

<a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a>

<a class="dropdown-item" href="https://www.jquery-az.com/jquery-tips/">jQuery</a>

<a class="dropdown-item" href="https://www.jquery-az.com/php-tutorials/">PHP Tutorials</a>

</div>

Adding headings in the dropdown menu

Use the .dropdown-header class for creating the headers in the menu:

See online demo and code

The markup for heading:

<h6 class=”dropdown-header”>Programming Languages</h6>

See the output and code in the example page.

Display a form in dropdown

Well, you may virtually display any other content in the Bootstrap dropdown component. For example, display a form as the “Subscribe” button is pressed, otherwise, form is not visible.

In the following demo, a simple form is used that displays as the button is pressed:

See online demo and code

The code:

<h3>A demo of form in dropdown</h3>

Please Login

</button>

<label for="emailDropdown">Email address</label>

</div>

<label for="passwordDropdown">Password</label>

</div>

Remember me

</label>

</div>

</form>

</div>

The demo of using button dropdown in navbar

The following example uses button dropdown in the navigation bar. You may copy the complete code from the demo page and paste in your IDE and run at your own system for full screen view.

See online demo and code

The code:

<a class="navbar-brand" href="#">Business</a>

</button>

<a class="nav-link" href="#">Tech Home <span class="sr-only">(current)</span></a>

</li>

<a class="nav-link" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap</a>

</li>

Tutorials

</button>

<a class="dropdown-item" href="https://www.jquery-az.com/jquery-tips/">jQuery</a>

<a class="dropdown-item" href="https://www.jquery-az.com/python-tutorials/">Python</a>

<a class="dropdown-item" href="https://www.jquery-az.com/vba-excel-tutorials/">Excel</a>

</div>

</li>

<a class="nav-link disabled" href="#">Go Tutorials</a>

</li>

</ul>

</form>

</div>

</nav>

Complete code in example page.

Dropdown

A simple example of button dropdown

See online demo and code

The example of link dropdown

See online demo and code

Dropping the menu links upward example

See online demo and code

Using buttons for menu items rather links example

See online demo and code

Creating split button dropdown menu

See online demo and code

Opening dropdown as any button is clicked example

See online demo and code

Multi-colored dropdown buttons demo

See online demo and code

The demo of creating outline style button dropdowns

See online demo and code

A few more styles for split buttons

See online demo and code

Various size dropdown examples

See online demo and code

Place dividers between menu items

See online demo and code

Adding headings in the dropdown menu

See online demo and code

Display a form in dropdown

See online demo and code

The demo of using button dropdown in navbar

See online demo and code

Related Tutorials: