Navbar
Documentation and examples for how to use Bootstrap’s included navbar components.
In examples used Header Search component
See more information how to use.
Basci example
<!-- Header -->
<header class="header header-light bg-white">
<nav class="navbar flex-nowrap p-0">
<div class="navbar-brand-wrapper col-auto">
<!-- Logo For Mobile View -->
<a class="navbar-brand navbar-brand-mobile" href="../../demo-crypto/dashboards/index.html">
<img class="img-fluid w-100" src="../../assets/img/logo-mini.png" alt="Nova">
</a>
<!-- End Logo For Mobile View -->
<!-- Logo For Desktop View -->
<a class="navbar-brand navbar-brand-desktop" href="../../demo-crypto/dashboards/index.html">
<img class="side-nav-show-on-closed" src="../../assets/img/logo-mini.png" alt="Nova" style="width: 41px; height: 33px;">
<img class="side-nav-hide-on-closed" src="../../assets/img/logo.png" alt="Nova" style="width: 130px; height: 33px;">
</a>
<!-- End Logo For Desktop View -->
</div>
<div class="header-content col px-md-3 px-md-3">
<div class="d-flex align-items-center">
<!-- Header Search -->
<div class="js-header-search position-relative"
data-search-target="#headerSearchResults"
data-search-mobile-invoker="#headerSearchMobileInvoker"
data-search-form="#headerSearchForm"
data-search-field="#headerSearchField"
data-search-clear="#headerSearchResultsClear">
<a id="headerSearchMobileInvoker" class="header-search-invoker header-invoker" href="#">
<i class="nova-search"></i>
</a>
<form id="headerSearchForm" class="header-search input-group input-group-merge w-18_75rem w-md-22_5rem" action="#">
<input id="headerSearchField" class="header-search-input form-control form-control-append-icon" type="text" placeholder="Search nova database">
<div class="input-group-append-merge focus-hide">
<i class="nova-search icon-text"></i>
</div>
<div class="input-group-append-merge focus-show">
<span id="headerSearchResultsClear">
<i class="nova-close icon-text"></i>
</span>
</div>
<div id="headerSearchResults" class="unfold unfold-light unfold-top unfold-centered position-absolute w-100 mt-3">
<div class="border-bottom px-3 px-md-4 py-3">
<h6 class="font-weight-semi-bold mb-3">Projects</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<a class="link-dark" href="#">Technical delivery call</a>
</li>
<li class="mb-2">
<a class="link-dark" href="#">R&D meeting</a>
</li>
<li class="mb-2">
<a class="link-dark" href="#">Discuss campaign performance</a>
</li>
<li class="mb-0">
<a class="link-dark" href="#">SciFi Writing Group</a>
</li>
</ul>
</div>
<div class="border-bottom px-3 px-md-4 py-3">
<h6 class="font-weight-semi-bold mb-3">Projects</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<a class="link-dark media align-items-center" href="#">
<img class="avatar rounded-circle mr-2" src="../../assets/img/100x100/img4.jpg" width="40" alt="Image description">
<div class="media-body">
<h6 class="font-weight-semi-bold mb-0">Frances James</h6>
</div>
</a>
</li>
<li class="mb-2">
<a class="link-dark media align-items-center" href="#">
<img class="avatar rounded-circle mr-2" src="../../assets/img/100x100/img6.jpg" width="40" alt="Image description">
<div class="media-body">
<h6 class="font-weight-semi-bold mb-0">Susie Gibbs</h6>
</div>
</a>
</li>
<li class="mb-2">
<a class="link-dark media align-items-center" href="#">
<img class="avatar rounded-circle mr-2" src="../../assets/img/100x100/img12.jpg" width="40" alt="Image description">
<div class="media-body">
<h6 class="font-weight-semi-bold mb-0">Gertrude Ramsey</h6>
</div>
</a>
</li>
</ul>
</div>
<div class="px-3 px-md-4 py-3">
<a class="link" href="#">Show all (24) Results</a>
</div>
</div>
</form>
</div>
<!-- End Header Search -->
<!-- Header Dropdown -->
<div class="dropdown ml-auto">
<a id="messagesInvoker" class="header-invoker" href="#" aria-controls="messages" aria-haspopup="true" aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#messages"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-animation-in="fadeIn"
data-unfold-animation-out="fadeOut">
<span class="indicator indicator-bordered indicator-top-right indicator-secondary rounded-circle"></span>
<i class="nova-email"></i>
</a>
<div id="messages" class="dropdown-menu dropdown-menu-center py-0 mt-4 w-18_75rem w-md-22_5rem" aria-labelledby="messagesInvoker">
<div class="card">
<div class="card-header d-flex align-items-center border-bottom py-3">
<h5 class="mb-0">Messages</h5>
<a class="link small ml-auto" href="#">View All</a>
</div>
<div class="card-body p-0">
<div class="list-group list-group-flush">
<a class="list-group-item list-group-item-action" href="#">
<div class="media align-items-center">
<div class="position-relative d-none d-md-block mr-2">
<span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-success rounded-circle"></span>
<img class="avatar-lg rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image description">
</div>
<div class="media-body">
<div class="d-flex">
<h6 class="font-weight-semi-bold mb-0">Frances James</h6>
<small class="text-muted ml-auto">just now</small>
</div>
<p class="text-truncate mb-0" style="max-width: 250px;">
Reminder about your Appointment
</p>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action" href="#">
<div class="media align-items-center">
<div class="position-relative d-none d-md-block mr-2">
<span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-danger rounded-circle"></span>
<img class="avatar-lg rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image description">
</div>
<div class="media-body">
<div class="d-flex">
<h6 class="font-weight-semi-bold mb-0">Chad Ward</h6>
<small class="text-muted ml-auto">an hour ago</small>
</div>
<p class="text-truncate mb-0" style="max-width: 250px;">
If you could have any kind of pet, what would you choose?
</p>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action" href="#">
<div class="media align-items-center">
<div class="position-relative d-none d-md-block mr-2">
<span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-warning rounded-circle"></span>
<img class="avatar-lg rounded-circle" src="../../assets/img/100x100/img5.jpg" alt="Image description">
</div>
<div class="media-body">
<div class="d-flex">
<h6 class="font-weight-semi-bold mb-0">Carolyn Carlson</h6>
<small class="text-muted ml-auto">2 days ago</small>
</div>
<p class="text-truncate mb-0" style="max-width: 250px;">
I won $500 million in the lottery, I quit!
</p>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action" href="#">
<div class="media align-items-center">
<div class="position-relative d-none d-md-block mr-2">
<span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-success rounded-circle"></span>
<img class="avatar-lg rounded-circle" src="../../assets/img/100x100/img6.jpg" alt="Image description">
</div>
<div class="media-body">
<div class="d-flex">
<h6 class="font-weight-semi-bold mb-0">Lizzie Barber</h6>
<small class="text-muted ml-auto">4 days ago</small>
</div>
<p class="text-truncate mb-0" style="max-width: 250px;">
Spring fever.
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- End Header Dropdown -->
<!-- Header User Dropdown -->
<div class="dropdown mx-3">
<a id="profileMenuInvoker" class="header-complex-invoker" href="#" aria-controls="profileMenu" aria-haspopup="true" aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#profileMenu"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-animation-in="fadeIn"
data-unfold-animation-out="fadeOut">
<img class="avatar rounded-circle mr-md-2" src="../../assets/img/100x100/img9.jpg" alt="Image description">
<span class="d-none d-md-block">David Walters</span>
<i class="nova-angle-down d-none d-md-block ml-2"></i>
</a>
<ul id="profileMenu" class="unfold unfold-user unfold-light unfold-top unfold-centered position-absolute pt-2 pb-1 mt-4" aria-labelledby="profileMenuInvoker">
<li class="unfold-item">
<a class="unfold-link d-flex align-items-center text-nowrap" href="#">
<span class="unfold-item-icon mr-3">
<i class="nova-user"></i>
</span>
My Profile
</a>
</li>
<li class="unfold-item">
<a class="unfold-link d-flex align-items-center text-nowrap" href="#">
<span class="unfold-item-icon mr-3">
<i class="nova-cup"></i>
</span>
Upgrade Plan
</a>
</li>
<li class="unfold-item">
<a class="unfold-link d-flex align-items-center text-nowrap" href="#">
<span class="unfold-item-icon mr-3">
<i class="nova-folder"></i>
</span>
Latest Projects
</a>
</li>
<li class="unfold-item">
<a class="unfold-link d-flex align-items-center text-nowrap" href="#">
<span class="unfold-item-icon mr-3">
<i class="nova-book"></i>
</span>
Get Support
</a>
</li>
<li class="unfold-item unfold-item-has-divider">
<a class="unfold-link d-flex align-items-center text-nowrap" href="#">
<span class="unfold-item-icon mr-3">
<i class="nova-power-off"></i>
</span>
Sign Out
</a>
</li>
</ul>
</div>
<!-- End Header User Dropdown -->
</div>
</div>
</nav>
</header>
<!-- End Header -->
<!-- JS Nova -->
<script src="../../assets/js/hs.core.js"></script>
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/components/hs.header-search.js"></script>
<script>
$(document).on('ready', function () {
// initialization header search component
$.HSCore.components.HSHeaderSearch.init('.js-header-search');
// initialization of dropdown component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
unfoldHideOnScroll: false,
});
});
</script>
Info sidebar
<!-- Header -->
<header class="header header-light bg-white">
<nav class="navbar flex-nowrap p-0">
<div class="navbar-brand-wrapper col-auto">
<!-- Logo For Mobile View -->
<a class="navbar-brand navbar-brand-mobile" href="../../demo-crypto/dashboards/index.html">
<img class="img-fluid w-100" src="../../assets/img/logo-mini.png" alt="Nova">
</a>
<!-- End Logo For Mobile View -->
<!-- Logo For Desktop View -->
<a class="navbar-brand navbar-brand-desktop" href="../../demo-crypto/dashboards/index.html">
<img class="side-nav-show-on-closed" src="../../assets/img/logo-mini.png" alt="Nova" style="width: 41px; height: 33px;">
<img class="side-nav-hide-on-closed" src="../../assets/img/logo.png" alt="Nova" style="width: 130px; height: 33px;">
</a>
<!-- End Logo For Desktop View -->
</div>
<div class="header-content col px-md-3 px-md-3">
<div class="d-flex align-items-center">
<!-- Info Sidebar Toggle -->
<a id="activityInvoker" class="header-invoker ml-auto" href="#" aria-controls="activity" aria-haspopup="true" aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#activity"
data-unfold-type="css-animation"
data-unfold-animation-in="fadeInRight"
data-unfold-animation-out="fadeOutRight"
data-unfold-duration="300">
<i class="nova-align-right"></i>
</a>
<!-- End Info Sidebar Toggle -->
<!-- Info Sidebar -->
<div id="activity" class="js-custom-scroll sidebar sidebar-light sidebar-right sidebar-full-height unfold-css-animation unfold-hidden position-fixed" aria-labelledby="activityInvoker">
<div class="border-bottom d-flex align-items-center text-nowrap px-3 px-md-4 py-3">
<h5 class="mb-0">Activity</h5>
<a id="activityClose" class="text-muted small ml-auto" href="#" aria-controls="activity" aria-haspopup="true" aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#activity"
data-unfold-type="css-animation"
data-unfold-animation-in="fadeInRight"
data-unfold-animation-out="fadeOutRight"
data-unfold-duration="300">
<i class="nova-close icon-text"></i>
</a>
</div>
<!-- Info Sidebar Content Here -->
<div class="p-2">
<h2>Info Here</h2>
</div>
<!-- End Info Sidebar Content Here -->
</div>
<!-- End Info Sidebar -->
</div>
</div>
</nav>
</header>
<!-- End Header -->
<!-- JS Nova -->
<script src="../../assets/js/hs.core.js"></script>
<script src="../../assets/js/components/hs.unfold.js"></script>
<script>
$(document).on('ready', function () {
// initialization of Unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
unfoldHideOnScroll: false,
});
});
</script>