Dropping it down
It is time to go back to the buttons once more. Now we will use the buttons dropdown. Button dropdowns are great for grouping a set of options in a single button. It can be used in several situations.
To make use of these, you just need to make some small markups and class usages. We will also go a little further and add a button dropdown to our new navigation bar. The complete HTML code of the <nav> tag is this one:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="landing_page.html">Company name</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <a class="btn btn-primary navbar-btn pull-right" href="#" role="button">Sign up</a> -->
</div>
<div class="btn-group pull-right">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Customer area <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div id="nav-menu" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li><a href="#about">About</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
The highlighted code is the new one for the drop-down button. We have to create a <button>, followed by a list <ul>, all of that wrapped by a div.btn-group. It is a pretty strict piece of code that should be used for these components.
Regarding the CSS, we must add some spacing between the button and the list. So, the CSS for the button drop-down is as follows:
nav .btn-group {
margin: 0.8rem 2rem 0 0;
}
The result for the button is presented in the following screenshot:
Oops! If you see the example for large devices, the new button looks pretty good, although it looks badly placed for small devices. Let's fix this with a media query!
@media(max-width: 48em){
nav .btn-group {
position: absolute;
top: 0;
right: 4em;
}
}
After the fix, the output that you get should be as shown in this screenshot:
Customizing buttons dropdown
The Bootstrap buttons dropdown offers some custom options. The first one that we will discuss is the split option. To do this, you need to change your HTML a bit:
<div class="btn-group pull-right">
<button type="button" class="btn btn-primary">Customer area</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
The main difference is the bold text, where we create another button, which will be responsible for the split effect, as shown in the following screenshot:
Moving on, you can make the drop-down a "drop-up". To do that, simply add the class to div.btn-group:
<div class="btn-group dropup"> ... </div>