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 -->
Link gray
Use .nav-link-gray
for gray styled color option.
<!-- Nav -->
<ul class="nav nav-link-gray nav-lg">
<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 -->
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 pills shadow
Use .nav-pills-shadow
to add box-shadow for .active
class
<!-- Nav -->
<ul class="nav nav-pills nav-pills-shadow">
<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 -->
<ul class="nav nav-pills 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.
<!-- 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
// =======================================================
new HsNavScroller('.js-nav-scroller')
});
</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.
<!-- 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
// =======================================================
new HsNavScroller('.js-nav-scroller')
});
</script>
Vertical
Use "type": "vertical"
for vertical alignment and the .hs-nav-scroller-vertical
class for a scrollbar.
<!-- 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
// =======================================================
new HsNavScroller('.js-nav-scroller')
});
</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
|