Bootstrap offers the Dropdown component—a toggleable, contextual overlay for displaying lists of links and other HTML elements. An example use case for them is to provide more elements to your navigation system. For instance, you can have the most relevant links on your website on the navigation bar, and then place additional links in a Dropdown menu. They can also hold other elements, so you can have a Sign Up link on your Navbar that displays a Sign Up form in a Dropdown when clicked, or you can have a Search link on your Navbar that displays a Dropdown with a Search field.
This guide will show you how to add and customize Dropdown menus on the Startup template.
Creating a Dropdown
To create a Dropdown menu, you’ll need the menu itself with its content as well as a toggle (usually a button or link) that will be clicked to display the Dropdown. You wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. You then add the dropdown-toggle class to the toggle and wrap the dropdown’s content in a .dropdown-menu.
Single Button
Below, we create a Dropdown menu that contains a list of three links. We use a single button as the toggle.
Using a button
<section class="pt-105 pb-45 dp">
<div class="container px-xl-0">
<div class="row justify-content-center">
<div class="col-xl-10">
<div class="dropdown">
<button class="btn action-2 dropdown-toggle dp-btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Click Me
</button>
<div class="dropdown-menu dp-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Yet another action</a>
</div>
</div>
</div>
</div>
</div>
</section>
Below, we use a link instead of a button element to get the same effect as above.
Using a link
<section class="pt-105 pb-45 dp">
<div class="container px-xl-0">
<div class="row justify-content-center">
<div class="col-xl-10">
<div class="dropdown">
<a class="btn action-2 dropdown-toggle dp-btn" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Click Me
</a>
<div class="dropdown-menu dp-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Yet another action</a>
</div>
</div>
</div>
</div>
</div>
</section>
You can see the result of the above two code snippets below.
You might have noticed the following three classes on the code snippets above: dp, dp-btn and dp-menu. These are custom classes and below is their CSS rules. Paste it at the bottom of css/style.css.
.dp-btn {
border-radius: .25rem;
}
.dp-menu {
padding: .5rem 0;
margin: .125rem 0 0;
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem;
}
.dp {
overflow: visible;
}
So what do these classes do?
Well, let’s start with dp. If you take a look at your index.html file, you will notice that its content has been placed in different <section> tags. Something like what’s shown below.
<section class="pt-105 pb-45 dp">
<div class="container px-xl-0">
<div class="row justify-content-center">
<div class="col-xl-10">
...
</div>
</div>
</div>
</section>
We use this to position content on the startup template.
By default, we style the Startup templates header, section and .form_2 elements with overflow: hidden;. If a Dropdown menu is placed inside a container with overflow: hidden, it will be clipped if there is no room for its content.
To fix this, you can add overflow: visible; to its container, which we do with the dp class.
The dp-btn class is used to add border-radius: .25rem; to the button that acts as the Dropdown’s toggle. Without this class, the button would be more rounded:
By default, the Startup templates Dropdown menus look as shown below.
We added the dp-menu class to the Dropdown menu to make them look more like the default Bootstrap Dropdowns, but if you prefer the above look, then leave out this class.
Toggle Sizing
You can change the toggle button’s size by adding either the sm, md, lg or xl class to it.
<!-- Small button -->
<section class="pt-105 pb-45 dp">
<div class="container px-xl-0">
<div class="row justify-content-center">
<div class="col-xl-10">
<div class="dropdown">
<button class="btn sm action-2 dropdown-toggle dp-btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Click Me
</button>
<div class="dropdown-menu dp-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Yet another action</a>
</div>
</div>
</div>
</div>
</div>
</section>
Small toggle:
<!-- Extra large button -->
<section class="pt-105 pb-45 dp">
<div class="container px-xl-0">
<div class="row justify-content-center">
<div class="col-xl-10">
<div class="dropdown">
<button class="btn xl action-2 dropdown-toggle dp-btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Click Me
</button>
<div class="dropdown-menu dp-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Yet another action</a>
</div>
</div>
</div>
</div>
</div>
</section>
Extra large toggle:
Split Button
You can create a split button Dropdown toggle with two buttons that appear as a single element.
<section class="pt-105 pb-45 dp">
<div class="container px-xl-0">
<div class="row justify-content-center">
<div class="col-xl-10">
<div class="btn-group">
<button type="button" class="btn action-2 dp-btn">Click Me</button>
<button type="button" class="btn action-2 dropdown-toggle dropdown-toggle-split dp-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dp-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Yet another action</a>
</div>
</div>
</div>
</div>
</div>
</section>
You can see the split button below.
Active Dropdown Items
You can add an active class to items in the Dropdown to style them as active.
<section class="pt-105 pb-45 dp">
<div class="container px-xl-0">
<div class="row justify-content-center">
<div class="col-xl-10">
<div class="dropdown">
<button class="btn action-2 dropdown-toggle dp-btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Click Me
</button>
<div class="dropdown-menu dp-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item active" href="#">Another action</a>
<a class="dropdown-item" href="#">Yet another action</a>
</div>
</div>
</div>
</div>
</div>
</section>
You can see the active menu item below:
Disabled Dropdown Items
You can add a disabled class to items in the Dropdown to style them as disabled.
<section class="pt-105 pb-45 dp">
<div class="container px-xl-0">
<div class="row justify-content-center">
<div class="col-xl-10">
<div class="dropdown">
<button class="btn action-2 dropdown-toggle dp-btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Click Me
</button>
<div class="dropdown-menu dp-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Yet another action</a>
</div>
</div>
</div>
</div>
</div>
</section>
Disabled menu item:
Dropdown Header
You can add a header to label sections of actions in a Dropdown menu with the dropdown-header class.
<section class="pt-105 pb-45 dp">
<div class="container px-xl-0">
<div class="row justify-content-center">
<div class="col-xl-10">
<div class="dropdown">
<button class="btn action-2 dropdown-toggle dp-btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Click Me
</button>
<div class="dropdown-menu dp-menu" aria-labelledby="dropdownMenuButton">
<h6 class="dropdown-header">Dropdown Header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Yet another action</a>
</div>
</div>
</div>
</div>
</div>
</section>
Below is the styled header
Dropdown Divider
You can separate groups of related menu items with a divider by using the dropdown-divider class.
<section class="pt-105 pb-45 dp">
<div class="container px-xl-0">
<div class="row justify-content-center">
<div class="col-xl-10">
<div class="dropdown">
<button class="btn action-2 dropdown-toggle dp-btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Click Me
</button>
<div class="dropdown-menu dp-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Yet another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</div>
</section>
Below you can see the divider:
Dropdown Within a Navbar
Below is an example use case of a Dropdown menu. We place it within a Navbar containing navigation links. When one of the links (Admin) is clicked, it reveals more links in a Dropdown menu.
<section class="pt-105 pb-45 dp">
<div class="container px-xl-0">
<div class="row justify-content-center">
<div class="col-xl-10">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a href="#" class="navbar-brand">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Profile</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Messages</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Admin</a>
<div class="dropdown-menu dp-menu">
<a href="#" class="dropdown-item">Reports</a>
<a href="#" class="dropdown-item">Settings</a>
<div class="dropdown-divider"></div>
<a href="#"class="dropdown-item">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</section>
You can see the expanded Dropdown menu below:
Display a Form in a Dropdown
As mentioned, you can have other elements in a Dropdown menu, other than text or links. A common use case is to place a form that doesn’t need to be visible on the page all the time but offers the user a quick way to get to it without navigating to another page. Below, we add a form in a Dropdown menu.
<section class="pt-105 pb-45 dp">
<div class="container px-xl-0">
<div class="row justify-content-center">
<div class="col-xl-10">
<button class="btn action-2 dropdown-toggle dp-btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Click Me
</button>
<div class="dropdown-menu dp-menu">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<button type="submit" class="btn action-1">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
</div>
</div>
</div>
</section>
Below is the revealed form:
