Lesson 14 - Bootstrap - Dropdowns

In the previous lesson, Bootstrap - Collapse and Accordion, we focused on the Bootstrap's Collapse component and its modification, Accordion. In today's tutorial about the most popular CSS framework, we're going to introduce Dropdowns.

Dropdowns

Dropdown is a Bootstrap component for displaying drop-down elements which drop when clicked on. This behavior is achieved, of course, by JavaScript, using the Popper.js library which is a part of Bootstrap's JavaScript package.

Example

As always, let's showcase the basics. The code below renders a dropdown button with three links.

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Contact
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdown-button">
        <a class="dropdown-item" href="#">Main office</a>
        <a class="dropdown-item" href="#">New York Branch Office</a>
        <a class="dropdown-item" href="#">Los Angeles Branch Office</a>
    </div>
</div>

The result in the browser:

In the example above, we use the <button> element which drops a <div> with several links. Instead of the <button> element we could also use the <a> element with the .btn class. To this button or link we assigning the .dropdown-toggle class and the data-toggle="dropdown" data attribute. Everything is wrapped in a <div> with the .dropdown class. Since the droppable menu with the .dropdown-menu class is displayed using the absolute position, the position of the main <div> is relative. We assign the .dropdown-item class to the individual menu items. If we wanted to use a custom wrapping element, it's necessary to set the relative position to it.

Split dropdowns

Dropdown can be split into two independent buttons. Bootstrap calls them Split button Dropdown. The first button takes most of the space and the second one is made just by a part of the original button with an arrow opening the menu. We have already shown this splitting in the lesson Advanced forms. For completeness' sake, let's also show this variant and assign a color class to the button as well. See the complete list of colors in Bootstrap - Buttons lesson. In the example, a class for enlarging button is used, as well as some other classes, which can be seen in the lesson about buttons again.

<div class="btn-group">
    <a class="btn btn-danger btn-lg" href="">Main Office</a>
    <button type="button" class="btn btn-danger btn-lg dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Other contacts</span>
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">New York Branch Office</a>
        <a class="dropdown-item" href="#">Los Angeles Branch Office</a>
    </div>
</div>

The result:

Clicking on the button above causes redirecting to the main office contact page. However, we can also click the arrow on the right and move to the contact pages of other offices.

Opening the menu upwards

If the button is placed somewhere at the bottom of the page, it may be better to open the menu upwards. This can be achieved by assigning the .dropup class, instead of the .dropdown class.

Menu items

Up until Bootstap 4, the menu items had to be links. Now, the menu can be composed even by e.g. the <button> elements. The menu is, by default, aligned to the left side of the button which opens it. This behavior can be changed by assigning the .dropdown-menu-right class to the menu (div with the .dropdown-menu class).

We can also add to the menu:

• Headers - Usually represented by the <h6> elements with the .dropdown-header class
• Dividers - Dividers represented as <div> elements with the .dropdown-divider class
• Forms - By using some margin and padding utilities to which we're gonna get further in this course, we can insert even a whole form as a menu item. However, I would apply the phrase "less is more" here

We can disable menu items by assigning the .disabled class.

Let's have a look at one more dropdown menu with the features mentioned above:

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Account
    </button>
    <div class="dropdown-menu dropdown-menu-right">
        <h6 class="dropdown-header">Sign in</h6>
        <form class="px-4 py-3">
            <div class="form-group">
                <label for="sign-in-email">Email</label>
                <input type="email" class="form-control" id="sign-in-email" placeholder="[email protected]">
            </div>
            <div class="form-group">
                <label for="sign-in-password">Password</label>
                <input type="password" class="form-control" id="sign-in-password" placeholder="******">
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
        </form>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item disabled" href="#">Sign up</a>
        <a class="dropdown-item" href="#">Forgot your password?</a>
    </div>
</div>

You can try out the result:

JavaScript

Similarly to all previously mentioned JavaScript components, we can initialize dropdowns by JavaScript as well, instead of by data attributes. It's a jQuery plugin which initialization could look like this:

$('.dropdown-toggle').dropdown();

A strange thing is that the data attribute data-toggle="dropdown" is still necessary to be assigned to the element, even when controlled by JavaScript.

Settings

There are two ways to configure dropdowns, either by attributes (with the data- prefix) or by JavaScript properties.

• offset - Allows to move the menu relatively to the button. We can move it by the same distance in both directions by providing only one value or providing two values separated by a comma. We provide more values as a string (e.g. "10%, 10px"). You can use math expressions as well.
• flip - Determines if the menu should flip if it covers the button.

Methods

We can pass one of the following parameters to the dropdown() method:

• "toggle" - Opens/hides the dropdown menu of the given navigation or toolbar.
• "update" - Updates the position of the dropdown menu of the given element.
• "dispose" - Removes the dropdown.

Events

The dropdown triggers events which we can handle in JavaScript as well. All events are triggered by the parent element of the menu (typically the main <div> in which everything is wrapped).

• show.bs.dropdown - Is triggered immediately when the dropdown is opened.
• shown.bs.dropdown - Is triggered when the dropdown is completely visible (once the animation finishes).
• hide.bs.dropdown - Is triggered immediately when the dropdown is closed.
• hidden.bs.dropdown - Is triggered when the dropdown is completely invisible (once the animation finishes).

An event handling can be implemented e.g. like this:

$('#id-dropdown-of-div').on('show.bs.dropdown', function () {
    // reacting to the event...
});

In the next lesson, Bootstrap - Navigation, we'll focus on universal navigation.