Using a simple Bootstrap plug-in, you can add dropdown menu in tabs by using the dropdown class. The nav and nav-tabs classes are also used to achieve this.
First, make an unordered list and give it a class of nav and nav-tabs. Now, give a class of dropdown to the list item tag which you wish to behave as a dropdown.
The next step is to create an unordered list for the dropdown tab and giving it a class of dropdown-menu.
You can also customize the dropdown menu and the nav links by writing your own CSS and overriding Bootstrap’s CSS. Here’s a working example for the same.
- How to remove active nav-tab when click outside of nav-tab in Bootstrap ?
- How to force tab-navigation to stay in place using Bootstrap ?
- How to remove arrow in dropdown in Bootstrap ?
- How to open dropdown menu on hover in Bootstrap ?
- How to replace dropdown-toggle icon with another default icon in Bootstrap ?
- How to design full width dropdown Navbar using Bootstrap ?
- How to use bootstrap-select for dropdown ?
- How to change font color in dropdown navbar when collapsed in bootstrap ?
- CSS | tab-size Property
- How to tab space instead of multiple non-breaking spaces (nbsp)?
- How to Create a Tab Image Gallery ?
- How to open a hyperlink in another window or tab in HTML ?
- Semantic-UI | Tab
- How to set active tab style with AngularJS?
- How to check which tab is active using Material UI ?
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.