You will discover how to include drop-down menus into different Bootstrap elements in this article.
Creating Dropdown Menus with Bootstrap
The dropdown menu is commonly used within the navigation header to display a list of related links when a user hovers the mouse or clicks on the trigger element.
Adding Dropdowns via Data Attributes
Bootstrap provides a simple and elegant method to add dropdown menus to elements using data attributes. The example below illustrates the minimal markup
required to add a dropdown menu to a hyperlink using data attributes.
This basic example showcases the fundamental form of Bootstrap dropdowns. Let's examine each part of the Bootstrap dropdown component in detail.
Explanation of Code
The Bootstrap dropdown consists of two main components: the dropdown trigger element, which can be a hyperlink or button, and the dropdown menu itself.
.dropdownclass is used to define a dropdown menu.
.dropdown-toggleclass identifies the trigger element, which is a hyperlink in this case. The
data-bs-toggle=dropdownattribute on the trigger element is essential for toggling the dropdown menu.
<div>element with the class
.dropdown-menuconstructs the dropdown menu, typically containing related links or actions.
Likewise, you can apply dropdowns to buttons and nav components. The following section presents various common implementations of the Bootstrap dropdown.
Dropdowns within a Navbar
You may learn how to add dropdowns to a navbar by looking at the instances below.
Note: You can separate the links inside a dropdown menu by using the class
.dropdown-divider on an empty
Dropdowns within Navs
In this example, you will learn how to incorporate dropdown menus into pills navs.
To convert a dropdown menu into a tab dropdown, simply replace the class
.nav-tabs without any other changes in the markup.
Dropdowns within Buttons
You may learn how to add dropdowns to a major buttons using the instances that follows.
Bootstrap Split Button Dropdowns
You may learn how to include dropdowns in split buttons by looking at the instances below.
Tip: To resize the buttons in the dropdowns, you can utilize Bootstrap's button relative sizing classes like
.btn-sm on the
Dropdowns Inside Button Groups
To create dropdown menus inside a button group, place a
.btn-group along with the dropdown markup within another
.btn-group, as demonstrated in the example.
In a similar manner, dropdowns may be created within button groups that are stacked vertically, as shown here:
Creating Dropup, Dropleft and Dropright Menus
You can position the dropdown menus above, left, or right of the elements by adding additional classes:
.dropend, respectively, to the parent element (i.e., the
Creating the Right Aligned Dropdown Menus
For right-aligned dropdown menus, include the class
.dropdown-menu-end to the
.dropdown-menu base class.
Adding Headers to Dropdown Items
To label a section of menu items in the dropdown, you can optionally add a menu header using the class
.dropdown-header on a
Disable Items within a Dropdown
To visually disable menu items in the dropdown, apply the class
.disabled. If you also want to prevent the links from being clickable, you can typically remove the anchor's
dropdown() Bootstrap method with the id or class selector of the link or button element.
data-bs-toggle=dropdown attribute remains necessary for the dropdown's trigger element.
Bootstrap Dropdown Options
You have the option to customize the functionality of a dropdown by passing certain options to the
To set dropdown options via data attributes, simply append the option name to data-bs-, such as
data-bs-display=static, among others. It's important to note that when using data attributes, you should change the case type of the option name from camelCase to kebab-case. For instance, use
data-bs-auto-close=false instead of
- Boundary: Type:
string | element, Default:
- Reference: Type:
string | element | object, Default Value:
Reference element of the dropdown menu. Accepts the values of
'parent', an HTMLElement reference, or an object providing
- Display: Type:
string, Default Value:
By default, Bootstrap uses Popper for dynamic positioning. You can disable this with
- Offset: Type:
array | string | function, Default:
Specify the offset of the dropdown relative to its target. You can pass a string in data attributes with comma-separated values like:
- AutoClose: Type:
boolean | string, Default Value:
Configure the auto-close behavior of the dropdown:
true- the dropdown will be closed by clicking outside or inside the dropdown menu.
false- the dropdown will be closed by clicking the toggle button and manually calling the hide or toggle method. Also, the dropdown will not be closed by pressing the
'inside'- the dropdown will be closed (only) by clicking inside the dropdown menu.
'outside'- the dropdown will be closed (only) by clicking outside the dropdown menu.
For further details on the choices listed above, consult the Popper.js document.
Bootstrap Dropdown Methods
The default dropdown mechanism for bootstrap is as follows:
toggle: The dropdown menu of a certain navbar or tabbed navigating is toggled using this way.
show: With this technique, a specific navbar or tabbed navigation's dropdown menu is displayed.
hide: The dropdown menu of a certain navbar or tabbed navigational is hidden using this technique.
update: The dropdown of an element is updated using this approach.
Bootstrap Dropdown Events
Furthermore, there are standard Bootstrap events available to enhance the dropdown functionality.
All dropdown events are triggered at the toggling element and then bubbled up. This allows you to add event listeners on the
.dropdown-menu's parent element. Additionally, you can use the event.relatedTarget to
target the toggling anchor element.
show.bs.dropdown: When the display instances method is called, this event occurs instantly.
shown.bs.dropdown: As soon as the consumer can see the dropdown menu and CSS transitions are complete, this event is dispatched.
hide.bs.dropdown: The instant the hide instances method is invoked, this event is triggered.
hidden.bs.dropdown: When the consumer is finished seeing the dropdown hidden and all CSS transitions have finished, this event is fired.
The dropdown link's text content is displayed when visitors clicked on it in the illustration below.
What is a Bootstrap Dropdown?
A Bootstrap Dropdown is a UI component provided by the Bootstrap framework that allows you to create a button or link that, when clicked, displays a menu of options or content. It's a common way to organize and display various choices or actions in a compact and user-friendly manner.
How do you create a basic Bootstrap Dropdown?
To create a basic Bootstrap Dropdown, you need to use the
<div> element with the class
dropdown. Inside the
<div>, you place a button or a link with the class
dropdown-toggle, and also include a
<div> with the class
dropdown-menu containing the dropdown items.
What role does the
data-toggle attribute play in a Bootstrap Dropdown?
data-toggle attribute is used to specify the behavior that triggers the dropdown to open. It is set to
'dropdown' to indicate that clicking on the designated element (usually a button or a link) will open the dropdown menu.
How can you place a Bootstrap Dropdown inside a Navbar?
To place a Bootstrap Dropdown inside a Navbar, you can use the
navbar-nav class for the
<ul> element inside the Navbar. Then, create a list item with the class
nav-item dropdown and place your dropdown components within it.
What is the purpose of the
data-target attribute in a Bootstrap Dropdown?
data-target attribute is used to specify the ID of the dropdown content that should be displayed when the dropdown is triggered. This attribute is used in conjunction with the
data-toggle attribute to associate the trigger element with the dropdown content.
How can you create a Split Button Dropdown in Bootstrap?
To create a Split Button Dropdown, you need to include a regular button and a separate button with a down caret icon. The regular button triggers the default action, while the button with the caret triggers the dropdown menu. Use the
dropdown-toggle-split class for the dropdown-triggering button.
Can you disable a Bootstrap Dropdown?
Yes, you can disable a Bootstrap Dropdown by adding the
disabled class to the trigger button or link. This will prevent the dropdown from opening when the user interacts with the trigger element.
How can you customize the appearance of a Bootstrap Dropdown?
You can customize the appearance of a Bootstrap Dropdown using CSS classes and your own custom styles. Bootstrap provides various classes for styling dropdowns, such as
dropdown-secondary, and more. You can also override these styles with your own CSS rules.
What is a Dropdown Header and Divider in Bootstrap?
A Dropdown Header in Bootstrap is a non-selectable heading that can be placed within a dropdown menu to separate and label groups of related items. It is created using the
A Dropdown Divider is a horizontal line that separates items within a dropdown menu. To create one, use the
dropdown-divider class within the dropdown menu to visually separate items.
What is the purpose of the
data-display attribute in Bootstrap Dropdowns?
data-display attribute is used to specify the way the selected dropdown item is displayed in the trigger button or link. It can be set to
'dynamic' to automatically display the selected item, or
'static' to keep the original content.
What is the purpose of the
data-offset attribute in a Bootstrap Dropdown?
data-offset attribute is used to specify the pixel offset from the top of the dropdown's parent element. This can be useful when you want to fine-tune the position of the dropdown in relation to the trigger element.
What are Dropup menus in Bootstrap?
Dropup menus in Bootstrap are essentially dropdown menus that open upwards instead of downwards. They are useful when there's limited space below the trigger element or when it makes more sense to display the menu above.
How can you position a Bootstrap Dropdown to the right instead of the default left?
By default, Bootstrap Dropdowns open towards the left. To make them open towards the right, add the
dropdown-menu-right class to the
<div> with the
dropdown-menu class. This will align the dropdown menu to the right of the trigger element.
Can you add icons to Bootstrap Dropdown items?
Yes, you can add icons to Bootstrap Dropdown items by including the appropriate icon elements (such as
<svg>) inside the dropdown item's HTML. Then, apply the necessary icon classes, such as those from FontAwesome or Bootstrap's built-in icon classes.
What is the purpose of the
hide events for Bootstrap Dropdowns?
show event is triggered when a dropdown is about to be displayed, while the
What is the difference between
.btn-group in Bootstrap?
.btn-group classes are used to create dropdown menus, but they offer different levels of styling and functionality. The
.dropdown class is simpler and more lightweight, while the
.btn-group class is used to create button groups that can contain dropdowns and other buttons.
How can you center-align the contents of a Bootstrap Dropdown menu?
To center-align the contents of a Bootstrap Dropdown menu, you can use custom CSS to set the
text-align property of the
.dropdown-menu class to
center. This will horizontally center-align the text and other elements within the dropdown menu.
How can you create a responsive Bootstrap Dropdown?
Bootstrap Dropdowns are responsive by default, as they adapt to various screen sizes. However, you can fine-tune the responsiveness by adjusting the placement of the dropdown menu, using utility classes like
dropdown-menu-right, and making sure your styles don't break the layout on smaller screens.
Is it possible to customize the animation duration of Bootstrap Dropdowns?
Yes, you can customize the animation duration of Bootstrap Dropdowns by modifying the CSS transitions applied to the
.dropdown-menu class. Adjust the
transition property to change the animation duration and easing function.
How do you create a right-aligned Bootstrap Dropdown menu?
Right-align a Bootstrap Dropdown menu by adding the
dropdown-menu-end class to the
How do you create a Bootstrap Dropdown with a badge on an option?
Add a badge to a Bootstrap Dropdown option using the
How do you create a Bootstrap Dropdown with multilevel nested options?
Implement multilevel nested options in a Bootstrap Dropdown by adding sub
<ul> elements within the main
How do you handle a Bootstrap Dropdown selection using jQuery?
Use jQuery to handle Bootstrap Dropdown selection events, providing additional functionality when an option is chosen:
How can you create a Bootstrap Dropdown with a dark theme?
Apply a dark theme to a Bootstrap Dropdown by using Bootstrap's contextual classes like
How do you create a Bootstrap Dropdown with a maximum height and scrolling options?
Set a maximum height and enable scrolling for a Bootstrap Dropdown by applying the
How do you create a Bootstrap Dropdown with a specific width?
Set a specific width for a Bootstrap Dropdown by adding custom styles:
The Bootstrap Dropdown Menu proves to be a versatile and feature-rich tool, offering developers a wide array of options to create intuitive and engaging navigation experiences. The concept of a Responsive Dropdown ensures a seamless user experience across devices, adapting to varying screen sizes and resolutions. The Dynamic Navigation Dropdown takes this adaptability further, providing interactive and context-aware navigation options that respond dynamically to user interactions.
The inclusion of Dynamic Content within dropdowns elevates their utility, enabling the presentation of interactive and ever-changing information directly within the navigation structure. The Select Menu feature enhances the user-friendliness of forms, providing a streamlined and accessible way for users to make selections. The diverse Navigation Options range from simple lists to multilevel structures, catering to a variety of content organization needs.
The commitment to aesthetics is evident in the Stylish Dropdown Design, ensuring that the menu not only serves a functional purpose but also contributes positively to the overall visual appeal of the website. The capability for Multilevel Dropdown Navigation offers a hierarchical organization, enhancing the user's ability to navigate through complex content structures.
Beyond the standard dropdown, the ability to Create Dropdowns within Buttons and integrate them seamlessly into Navbar Dropdowns provides additional flexibility for developers in designing interactive interfaces. The inclusion of features like Dropdown Menus with Headers and Dividers in Dropdowns adds organizational depth and visual clarity.