Bootstrap Dropdowns are interactive menus that display a list of options when the user clicks or activates a button or link. Dropdowns are commonly used in navigation menus, buttons, user profiles, and action menus.
.dropdown,
.dropdown-toggle, .dropdown-menu, and
.dropdown-item. Dropdown interactions require Bootstrap
JavaScript.
A Dropdown is a menu that remains hidden until the user activates its toggle button or link.
Dropdowns are useful when several related options need to be grouped under one menu.
<div class="dropdown">
<button
class="btn btn-primary dropdown-toggle"
type="button"
data-bs-toggle="dropdown">
Menu
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="#">
Option 1
</a>
</li>
</ul>
</div>The basic Dropdown consists of a wrapper, a toggle, and a dropdown menu.
<div class="dropdown">
<button
class="btn btn-primary dropdown-toggle"
type="button"
data-bs-toggle="dropdown">
Select
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="#">
HTML
</a>
</li>
<li>
<a class="dropdown-item"
href="#">
CSS
</a>
</li>
<li>
<a class="dropdown-item"
href="#">
JavaScript
</a>
</li>
</ul>
</div>
The .dropdown class is normally used as the wrapper
around a Dropdown component.
<div class="dropdown">
...
</div>It provides the positioning context for the dropdown menu.
The .dropdown-toggle class styles the element that opens
the dropdown menu and adds the visual dropdown indicator.
<button
class="btn btn-primary dropdown-toggle"
type="button"
data-bs-toggle="dropdown">
Options
</button>
The .dropdown-menu class creates the container that holds
the dropdown options.
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="#">
Home
</a>
</li>
<li>
<a class="dropdown-item"
href="#">
About
</a>
</li>
</ul>
Each option inside a dropdown menu commonly uses the
.dropdown-item class.
<a
class="dropdown-item"
href="#">
HTML Tutorial
</a>You can use links, buttons, or other suitable elements depending on the action you want to perform.
Dropdown items are often links that take the user to another page.
<div class="dropdown">
<button
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown">
Tutorials
</button>
<ul class="dropdown-menu">
<li>
<a
class="dropdown-item"
href="html.php">
HTML
</a>
</li>
<li>
<a
class="dropdown-item"
href="css.php">
CSS
</a>
</li>
</ul>
</div>
The .dropdown-divider class creates a horizontal divider
between groups of dropdown items.
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="#">
Profile
</a>
</li>
<li>
<a class="dropdown-item"
href="#">
Settings
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item"
href="#">
Logout
</a>
</li>
</ul>
The .dropdown-header class adds a non-interactive heading
inside a dropdown menu.
<ul class="dropdown-menu">
<li>
<h6 class="dropdown-header">
Tutorials
</h6>
</li>
<li>
<a class="dropdown-item"
href="#">
HTML
</a>
</li>
</ul>
The .active class can visually indicate the currently
selected dropdown item.
<a
class="dropdown-item active"
href="#"
aria-current="true">
HTML
</a>
The .disabled class can be used to indicate that a
dropdown item is unavailable.
<a
class="dropdown-item disabled"
aria-disabled="true"
href="#">
Coming Soon
</a>Bootstrap supports different dropdown directions and placements. The dropdown can open downward, upward, toward the start, or toward the end depending on the required layout.
Useful classes include:
.dropup.dropend.dropstart<div class="dropup">
<button
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown">
Open Up
</button>
...
</div>
The .dropup class makes the dropdown open upward when
there is appropriate space and positioning.
<div class="dropup">
<button
class="btn btn-secondary dropdown-toggle"
data-bs-toggle="dropdown">
Dropup
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="#">
Option 1
</a>
</li>
</ul>
</div>
The .dropend class can be used to make a dropdown open
toward the end side of the element.
<div class="dropend">
<button
class="btn btn-dark dropdown-toggle"
data-bs-toggle="dropdown">
Dropend
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
The .dropstart class can be used to make the dropdown
open toward the start side.
<div class="dropstart">
<button
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown">
Dropstart
</button>
<ul class="dropdown-menu">
...
</ul>
</div>A Dropdown can be combined with Bootstrap buttons to create action menus.
<div class="dropdown">
<button
class="btn btn-success dropdown-toggle"
data-bs-toggle="dropdown">
Actions
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="#">
Edit
</a>
</li>
<li>
<a class="dropdown-item"
href="#">
Delete
</a>
</li>
</ul>
</div>Dropdowns can also be combined with Bootstrap outline buttons.
<button
class="btn btn-outline-primary dropdown-toggle"
data-bs-toggle="dropdown">
Options
</button>Dropdowns are commonly used inside navigation menus.
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown">
Tutorials
</a>
<ul class="dropdown-menu">
<li>
<a
class="dropdown-item"
href="#">
HTML
</a>
</li>
<li>
<a
class="dropdown-item"
href="#">
Bootstrap
</a>
</li>
</ul>
</li>
The .dropdown-menu-text utility can be used for text
content that should appear inside a dropdown menu without behaving as
a clickable item.
<div class="dropdown-menu">
<span class="dropdown-item-text">
Welcome to our website.
</span>
</div>
Bootstrap provides utilities for aligning a dropdown menu.
For example, .dropdown-menu-end aligns the menu toward
the end of its parent.
<ul
class="dropdown-menu dropdown-menu-end">
<li>
<a
class="dropdown-item"
href="#">
Profile
</a>
</li>
</ul>
The .dropdown-menu-dark class creates a dark dropdown
menu.
<ul
class="dropdown-menu dropdown-menu-dark">
<li>
<a
class="dropdown-item"
href="#">
Home
</a>
</li>
<li>
<a
class="dropdown-item"
href="#">
About
</a>
</li>
</ul>A form can be placed inside a dropdown menu when a small interactive form is required.
<div class="dropdown-menu p-3">
<form>
<label
class="form-label">
Email
</label>
<input
type="email"
class="form-control"
placeholder="Enter email">
<button
class="btn btn-primary mt-2"
type="submit">
Submit
</button>
</form>
</div>This pattern can be useful for compact search, login, or filter forms.
A split button separates the main action from the dropdown toggle.
Bootstrap provides the .btn-group pattern for this.
<div class="btn-group">
<button
type="button"
class="btn btn-primary">
Save
</button>
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown">
<span class="visually-hidden">
Toggle Dropdown
</span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="#">
Save As
</a>
</li>
<li>
<a class="dropdown-item"
href="#">
Save Copy
</a>
</li>
</ul>
</div>Dropdown items can contain text and other inline content. This makes them useful for user account menus and action lists.
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="#">
👤 Profile
</a>
</li>
<li>
<a class="dropdown-item"
href="#">
⚙ Settings
</a>
</li>
<li>
<a class="dropdown-item"
href="#">
🚪 Logout
</a>
</li>
</ul>
Dropdowns can be combined with multiple buttons using
.btn-group.
<div class="btn-group">
<button
class="btn btn-primary">
Action
</button>
<button
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown">
More
</button>
<ul class="dropdown-menu">
<li>
<a
class="dropdown-item"
href="#">
Edit
</a>
</li>
<li>
<a
class="dropdown-item"
href="#">
Delete
</a>
</li>
</ul>
</div>The following example shows a simple Navbar containing a dropdown menu.
<nav
class="navbar navbar-expand-lg bg-dark"
data-bs-theme="dark">
<div class="container-fluid">
<a
class="navbar-brand"
href="#">
My Website
</a>
<div class="navbar-nav">
<a
class="nav-link"
href="#">
Home
</a>
<div class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown">
Courses
</a>
<ul class="dropdown-menu">
<li>
<a
class="dropdown-item"
href="#">
HTML
</a>
</li>
<li>
<a
class="dropdown-item"
href="#">
Python
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>Dropdowns should be designed so that users can understand and operate them using keyboards and assistive technologies.
aria-expanded when appropriate.aria-current for the current page when needed.<button
class="btn btn-primary dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false">
Courses
</button>Avoid these common mistakes when creating Bootstrap Dropdowns:
data-bs-toggle="dropdown".A tutorial website can use dropdowns to organize different subjects under one Tutorials menu.
<div class="dropdown">
<button
class="btn btn-primary dropdown-toggle"
type="button"
data-bs-toggle="dropdown">
Tutorials
</button>
<ul class="dropdown-menu">
<li>
<h6 class="dropdown-header">
Web Development
</h6>
</li>
<li>
<a
class="dropdown-item"
href="#">
HTML
</a>
</li>
<li>
<a
class="dropdown-item"
href="#">
CSS
</a>
</li>
<li>
<a
class="dropdown-item"
href="#">
Bootstrap
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<h6 class="dropdown-header">
Programming
</h6>
</li>
<li>
<a
class="dropdown-item"
href="#">
Python
</a>
</li>
<li>
<a
class="dropdown-item"
href="#">
JavaScript
</a>
</li>
</ul>
</div>This complete example combines a Bootstrap button, dropdown heading, dropdown links, divider, active item, and disabled item.
<div class="dropdown">
<button
class="btn btn-success dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false">
Courses
</button>
<ul class="dropdown-menu">
<li>
<h6 class="dropdown-header">
Web Development
</h6>
</li>
<li>
<a
class="dropdown-item active"
href="#"
aria-current="true">
HTML
</a>
</li>
<li>
<a
class="dropdown-item"
href="#">
CSS
</a>
</li>
<li>
<a
class="dropdown-item"
href="#">
Bootstrap
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<h6 class="dropdown-header">
Programming
</h6>
</li>
<li>
<a
class="dropdown-item"
href="#">
Python
</a>
</li>
<li>
<a
class="dropdown-item disabled"
aria-disabled="true"
href="#">
Java
</a>
</li>
</ul>
</div>.dropdown is the main Dropdown wrapper..dropdown-toggle creates the Dropdown toggle style..dropdown-menu contains the Dropdown options..dropdown-item styles individual menu items..dropdown-divider creates a separator..dropdown-header creates a heading inside a Dropdown..dropdown-item-text can display non-clickable text..active can indicate an active Dropdown item..disabled can indicate an unavailable item..dropdown-menu-end aligns the menu toward the end..dropdown-menu-dark creates a dark Dropdown menu..dropup, .dropend, and .dropstart control Dropdown direction.Question: Which Bootstrap class is used for the container that holds dropdown items?