Base nav
<!-- Nav -->
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<!-- End Nav -->
Centered with .justify-content-center:
<!-- Nav -->
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<!-- End Nav -->
Centered with .justify-content-end:
<!-- Nav -->
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<!-- End Nav -->
Sizes
Use .nav-sm for smaller size
<!-- Nav -->
<ul class="nav nav-sm">
<li class="nav-item">
<a class="nav-link active" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Media</a>
</li>
</ul>
<!-- End Nav -->
Use .nav-lg for larger size
<!-- Nav -->
<ul class="nav nav-lg">
<li class="nav-item">
<a class="nav-link active" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Media</a>
</li>
</ul>
<!-- End Nav -->
Fill and justify
Force your .nav’s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your .nav-items, use .nav-fill. Notice that all horizontal space is occupied, but not every nav item has the same width.
<!-- Nav -->
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<!-- End Nav -->
Nav tabs
Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.
<!-- Nav -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<!-- End Nav -->
Nav pills
Take that same HTML, but use .nav-pills instead:
<!-- Nav -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<!-- End Nav -->
Nav segment
<!-- Nav -->
<ul class="nav nav-segment">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<!-- End Nav -->
Nav icon
<!-- Nav -->
<ul class="nav nav-segment">
<li class="nav-item">
<a class="nav-link active" href="#">
<i class="bi-house nav-icon"></i> Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi-person nav-icon"></i> Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi-sliders nav-icon"></i> Settings
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
<i class="bi-image nav-icon"></i> Media
</a>
</li>
</ul>
<!-- End Nav -->
Nav light
<!-- Nav -->
<ul class="nav nav-light">
<li class="nav-item">
<a class="nav-link active" href="#">
<i class="bi-house nav-icon"></i> Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi-person nav-icon"></i> Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi-sliders nav-icon"></i> Settings
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
<i class="bi-image nav-icon"></i> Media
</a>
</li>
</ul>
<!-- End Nav -->
Nav vertical
Stack your navigation by changing the flex item direction with the .nav-vertical class.
<!-- Nav Vertical -->
<ul class="nav nav-vertical">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<!-- End Nav Vertical -->
Nav scroller
Make arrows visible by setting a max-width size.
This example uses Nav scroller library.
<!-- Nav Scroller -->
<div class="js-nav-scroller hs-nav-scroller-horizontal" style="max-width: 22rem;">
<span class="hs-nav-scroller-arrow-prev" style="display: none;">
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
<i class="bi-chevron-left"></i>
</a>
</span>
<span class="hs-nav-scroller-arrow-next" style="display: none;">
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
<i class="bi-chevron-right"></i>
</a>
</span>
<!-- Nav -->
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tasks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
</ul>
<!-- End Nav -->
</div>
<!-- End Nav Scroller -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
<script>
(function() {
// INITIALIZATION OF NAV SCROLLER
// =======================================================
$('.js-nav-scroller').each(function () {
new HsNavScroller($(this)).init()
});
});
</script>
Or don't, then they will appear when the side of the content is smaller than the content size. Reduce the browser size to see in action.
This example uses Nav scroller library.
<!-- Nav Scroller -->
<div class="js-nav-scroller hs-nav-scroller-horizontal">
<span class="hs-nav-scroller-arrow-prev" style="display: none;">
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
<i class="bi-chevron-left"></i>
</a>
</span>
<span class="hs-nav-scroller-arrow-next" style="display: none;">
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
<i class="bi-chevron-right"></i>
</a>
</span>
<!-- Nav -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tasks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log out</a>
</li>
</ul>
<!-- End Nav -->
</div>
<!-- End Nav Scroller -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
<script>
(function() {
// INITIALIZATION OF NAV SCROLLER
// =======================================================
$('.js-nav-scroller').each(function () {
new HsNavScroller($(this)).init()
});
});
</script>
Vertical
Use "type": "vertical" for vertical alignment and the .hs-nav-scroller-vertical class for a scrollbar.
This example uses Nav scroller library.
<!-- Nav Scroller -->
<div class="js-nav-scroller hs-nav-scroller-vertical" style="max-height: 12rem; max-width: 22rem;"
data-hs-nav-scroller-options='{
"type": "vertical"
}'>
<span class="hs-nav-scroller-arrow-prev" style="display: none;">
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
<i class="bi-chevron-left"></i>
</a>
</span>
<span class="hs-nav-scroller-arrow-next" style="display: none;">
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
<i class="bi-chevron-right"></i>
</a>
</span>
<!-- Nav -->
<ul class="nav nav-vertical">
<li class="nav-item">
<a class="nav-link active" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tasks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log out</a>
</li>
</ul>
<!-- End Nav -->
</div>
<!-- End Nav Scroller -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
<script>
(function() {
// INITIALIZATION OF NAV SCROLLER
// =======================================================
document.querySelectorAll('.js-nav-scroller').forEach(item => {
new HsNavScroller(item).init()
})
});
</script>
Nav scroller methods
| Parameters | Description | Default value |
|---|---|---|
type
|
Scrollbar type, vertical or horizontal.
|
horizontal
|
target
|
Element to which the scrollbar will move. |
.active
|
delay
|
Animation delay. |
20
|
offset
|
Indent back for scrollbar. |
0
|