Last Updated on January 1, 2025 by Roshan Parihar
Learn how to create hover nav tabs using Bootstrap 5 and its other version. The short answer is to use the mouseover event with show() function.
The tab menus may contain multiple tabs options which on click displays its relevant content by default. Let’s find out how you display it on hover.
Display Nav Tabs on Hover in Bootstrap 5
Nav tabs by default, display the content on tab click. Bootstrap 5 start using javascript and that’s why you have to just add some javascript code as given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#menu3">Menu 3</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div id="menu1" class="container tab-pane active"><br> <h3>Menu 1</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="menu2" class="container tab-pane fade"><br> <h3>Menu 2</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> <div id="menu3" class="container tab-pane fade"><br> <h3>Menu 3</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> </div> <script> var btn = document.querySelectorAll('.nav-tabs > li > a'); btn.forEach(function(anchor) { anchor.addEventListener('mouseover', function() { new bootstrap.Tab(this).show(); }); }); </script> |
Output
It uses the mouseover event of Javascript with show() to get the desired output.
You can click the output above to see the live editor with the nav tabs to display its content on hover.
Hover Nav Tabs in Bootstrap 4
There can be different way to create nav tabs in Bootstrap 4. You have to first create nav tabs with the code given below. After that, use some jQuery as given below to create hover tabs in Bootstrap 4.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!-- Nav tabs --> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu3">Menu 3</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane container active" id="menu1"> <h3>Menu 1</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class="tab-pane container fade" id="menu2"> <h3>Menu 2</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> <div class="tab-pane container fade" id="menu3"> <h3>Menu 3</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> </div> <script> $(document).ready(function(){ $('.nav-tabs > li > a').hover(function() { $(this).tab('show'); }); }) </script> |
Output
When you click the output given above, you will get the live editor with nav tabs. You can hover over the tabs to see its relevant content.
Create this in Bootstrap 3
Bootstap 3 is the oldest version but still using by many users to create nav tabs. You can create hover tab by just adding some jQuery code as given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#menu1">Menu 1</a></li> <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> </ul> <div class="tab-content"> <div id="menu1" class="tab-pane fade in active"> <h3>Menu 1</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> <div id="menu3" class="tab-pane fade"> <h3>Menu 3</h3> <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> </div> </div> <script> $(document).ready(function(){ $('.nav-tabs > li > a').hover(function() { $(this).tab('show'); }); }) </script> |
Output
To see the live result, you can click output given above. After that, hover over the nav tabs to see its content.