Bootstrap Free Admin Navbar Template
Airplane
Alarm
Archive
Ratio
Award
Bag
Baloon
Baloon
Ban
Bank
Chart
Basket
Battery
Bell
Book
Briefcase
Brightness
Brush
Bug
Calendar
Camera
Video
Cart
Cast
Chat
Check
Chevron
Slash
Clipboard
Clock
Cloud
Cloud
Code
Collection
Copy
Cursor
<!-- Header -->
<header id="header-demo">
<nav class="navbar navbar-expand-md bg-body-tertiary bsb-navbar-3">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item me-3">
<a class="nav-link" href="#!" data-bs-toggle="offcanvas" data-bs-target="#bsbSidebar1" aria-controls="bsbSidebar1">
<i class="bi-filter-left fs-3 lh-1"></i>
</a>
</li>
</ul>
<a class="navbar-brand" href="#!">
<img src="./assets/img/branding/bsb-logo.svg" class="img-fluid" alt="BootstrapBrain Logo" width="135" height="44">
</a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#bsbNavbar" aria-controls="bsbNavbar" aria-label="Toggle Navigation">
<i class="bi bi-three-dots"></i>
</button>
<div class="collapse navbar-collapse" id="bsbNavbar">
<ul class="navbar-nav bsb-dropdown-menu-responsive ms-auto align-items-center">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle bsb-dropdown-toggle-caret-disable" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="position-relative pt-1">
<i class="bi bi-search"></i>
</span>
</a>
<div class="dropdown-menu dropdown-menu-md-end bsb-dropdown-animation bsb-fadeIn">
<form class="row g-1 px-3 py-2 align-items-center">
<div class="col-8">
<label class="visually-hidden" for="inputSearchNavbar">Search</label>
<input type="text" class="form-control" id="inputSearchNavbar">
</div>
<div class="col-4">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</form>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle bsb-dropdown-toggle-caret-disable" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="position-relative pt-1">
<i class="bi bi-globe"></i>
</span>
</a>
<div class="dropdown-menu dropdown-menu-md-end bsb-dropdown-sm bsb-dropdown-animation bsb-fadeIn">
<div>
<h6 class="dropdown-header fs-7 text-center">Multilingual</h6>
</div>
<div>
<hr class="dropdown-divider mb-0">
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action" aria-current="true">
<div class="row g-0 align-items-center">
<div class="col-2">
<img src="./assets/img/translation/flag-img-1.svg" class="img-fluid rounded-pill" alt="Arabic">
</div>
<div class="col-10">
<div class="ps-3">
<div class="fs-7">Arabic</div>
</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action" aria-current="true">
<div class="row g-0 align-items-center">
<div class="col-2">
<img src="./assets/img/translation/flag-img-2.svg" class="img-fluid rounded-pill" alt="Chinese">
</div>
<div class="col-10">
<div class="ps-3">
<div class="fs-7">Chinese</div>
</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
<div class="row g-0 align-items-center">
<div class="col-2">
<img src="./assets/img/translation/flag-img-3.svg" class="img-fluid rounded-pill" alt="English">
</div>
<div class="col-10">
<div class="ps-3">
<div class="fs-7">English</div>
</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action" aria-current="true">
<div class="row g-0 align-items-center">
<div class="col-2">
<img src="./assets/img/translation/flag-img-4.svg" class="img-fluid rounded-pill" alt="French">
</div>
<div class="col-10">
<div class="ps-3">
<div class="fs-7">French</div>
</div>
</div>
</div>
</a>
</div>
<div>
<hr class="dropdown-divider mt-0">
</div>
<div>
<a class="dropdown-item fs-7 text-center" href="#">See All Languages</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle bsb-dropdown-toggle-caret-disable" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="position-relative pt-1">
<i class="bi bi-chat-left"></i>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary">
9
<span class="visually-hidden">New Chats</span>
</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-md-end bsb-dropdown-animation bsb-fadeIn">
<div>
<h6 class="dropdown-header fs-7 text-center">9 New Messages</h6>
</div>
<div>
<hr class="dropdown-divider mb-0">
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action" aria-current="true">
<div class="row g-0 align-items-center">
<div class="col-2">
<img src="./assets/img/chat/chat-img-1.jpg" class="img-fluid rounded-circle" alt="Luna John">
</div>
<div class="col-10">
<div class="ps-3">
<div class="text-dark">Luna John</div>
<div class="text-secondary mt-1 fs-7">Hello, I'm having trouble with my account.</div>
<div class="text-secondary mt-1 fs-7">15m ago</div>
</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="row g-0 align-items-center">
<div class="col-2">
<img src="./assets/img/chat/chat-img-2.jpg" class="img-fluid rounded-circle" alt="Mark Smith">
</div>
<div class="col-10">
<div class="ps-3">
<div class="text-dark">Mark Smith</div>
<div class="text-secondary mt-1 fs-7">Hi, I'm not able to change my password.</div>
<div class="text-secondary mt-1 fs-7">23m ago</div>
</div>
</div>
</div>
</a>
</div>
<div>
<hr class="dropdown-divider mt-0">
</div>
<div>
<a class="dropdown-item fs-7 text-center" href="#">See All Messages</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle bsb-dropdown-toggle-caret-disable" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="position-relative pt-1">
<i class="bi bi-bell"></i>
<span class="p-1 bg-danger border border-light rounded-circle position-absolute top-0 start-100 translate-middle">
<span class="visually-hidden">New Notifications</span>
</span>
</span>
</a>
<ul class="dropdown-menu dropdown-menu-md-end bsb-dropdown-animation bsb-fadeIn">
<li>
<h6 class="dropdown-header fs-7 text-center">18 Notifications</h6>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item d-flex align-items-center" href="#!">
<span>
<i class="bi bi-envelope-fill me-2"></i>
<span class="fs-7">New Messages</span>
</span>
<span class="fs-7 ms-auto text-secondary">5 mins</span>
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item d-flex align-items-center" href="#!">
<span>
<i class="bi bi-person-fill me-2"></i>
<span class="fs-7">Friend Requests</span>
</span>
<span class="fs-7 ms-auto text-secondary">17 hours</span>
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item d-flex align-items-center" href="#!">
<span>
<i class="bi bi-file-earmark-fill me-2"></i>
<span class="fs-7">New Reports</span>
</span>
<span class="fs-7 ms-auto text-secondary">3 days</span>
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item fs-7 text-center" href="#">See All Notifications</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle bsb-dropdown-toggle-caret-disable" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="./assets/img/profile/profile-img-1.jpg" width="35" height="35" class="img-fluid rounded-circle" alt="Luke Reeves">
</a>
<ul class="dropdown-menu dropdown-menu-md-end bsb-dropdown-animation bsb-fadeIn">
<li>
<h6 class="dropdown-header fs-7 text-center">Welcome, Luke Reeves</h6>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a href="#" class="dropdown-item" aria-current="true">
<div class="row g-0 align-items-center">
<div class="col-3">
<img src="./assets/img/profile/profile-img-1.jpg" width="55" height="55" class="img-fluid rounded-circle" alt="Luke Reeves">
</div>
<div class="col-9">
<div class="ps-3">
<div class="text-secondary mt-1 fs-7">Premium Account</div>
<div class="text-secondary mt-1 fs-7">[email protected]</div>
</div>
</div>
</div>
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#!">
<span>
<i class="bi bi-person-fill me-2"></i>
<span class="fs-7">View Profile</span>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#!">
<span>
<i class="bi bi-bell-fill me-2"></i>
<span class="fs-7">Notifications</span>
</span>
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#!">
<span>
<i class="bi bi-gear-fill me-2"></i>
<span class="fs-7">Settings & Privacy</span>
</span>
</a>
</li>
<li>
<a class="dropdown-item" href="#!">
<span>
<i class="bi bi-question-circle-fill me-2"></i>
<span class="fs-7">Help Center</span>
</span>
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item text-center" href="#!">
<span>
<span class="fs-7">Log Out</span>
</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Main -->
<div id="main-demo">
<section class="my-3 my-md-4">
<div class="container">
<div class="row gy-3">
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-airplane mb-3"></i>
<span class="fs-7 text-body-secondary">Airplane</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-alarm mb-3"></i>
<span class="fs-7 text-body-secondary">Alarm</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-archive mb-3"></i>
<span class="fs-7 text-body-secondary">Archive</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-aspect-ratio mb-3"></i>
<span class="fs-7 text-body-secondary">Ratio</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-award mb-3"></i>
<span class="fs-7 text-body-secondary">Award</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-bag mb-3"></i>
<span class="fs-7 text-body-secondary">Bag</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-balloon mb-3"></i>
<span class="fs-7 text-body-secondary">Baloon</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-balloon-heart mb-3"></i>
<span class="fs-7 text-body-secondary">Baloon</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-ban mb-3"></i>
<span class="fs-7 text-body-secondary">Ban</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-bank mb-3"></i>
<span class="fs-7 text-body-secondary">Bank</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-bar-chart mb-3"></i>
<span class="fs-7 text-body-secondary">Chart</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-basket mb-3"></i>
<span class="fs-7 text-body-secondary">Basket</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-battery mb-3"></i>
<span class="fs-7 text-body-secondary">Battery</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-bell mb-3"></i>
<span class="fs-7 text-body-secondary">Bell</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-book mb-3"></i>
<span class="fs-7 text-body-secondary">Book</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-briefcase mb-3"></i>
<span class="fs-7 text-body-secondary">Briefcase</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-brightness-high mb-3"></i>
<span class="fs-7 text-body-secondary">Brightness</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-brush mb-3"></i>
<span class="fs-7 text-body-secondary">Brush</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-bug mb-3"></i>
<span class="fs-7 text-body-secondary">Bug</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-calendar mb-3"></i>
<span class="fs-7 text-body-secondary">Calendar</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-camera mb-3"></i>
<span class="fs-7 text-body-secondary">Camera</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-camera-video mb-3"></i>
<span class="fs-7 text-body-secondary">Video</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-cart-plus mb-3"></i>
<span class="fs-7 text-body-secondary">Cart</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-cast mb-3"></i>
<span class="fs-7 text-body-secondary">Cast</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-chat mb-3"></i>
<span class="fs-7 text-body-secondary">Chat</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-check-lg mb-3"></i>
<span class="fs-7 text-body-secondary">Check</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-chevron-double-up mb-3"></i>
<span class="fs-7 text-body-secondary">Chevron</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-slash-circle mb-3"></i>
<span class="fs-7 text-body-secondary">Slash</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-clipboard mb-3"></i>
<span class="fs-7 text-body-secondary">Clipboard</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-clock mb-3"></i>
<span class="fs-7 text-body-secondary">Clock</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-cloud mb-3"></i>
<span class="fs-7 text-body-secondary">Cloud</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-cloud-fog2 mb-3"></i>
<span class="fs-7 text-body-secondary">Cloud</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-code mb-3"></i>
<span class="fs-7 text-body-secondary">Code</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-collection mb-3"></i>
<span class="fs-7 text-body-secondary">Collection</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-copy mb-3"></i>
<span class="fs-7 text-body-secondary">Copy</span>
</h2>
</div>
<div class="col-6 col-md-4 col-xl-2">
<h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
<i class="bi-cursor mb-3"></i>
<span class="fs-7 text-body-secondary">Cursor</span>
</h2>
</div>
</div>
</div>
</section>
</div>
<!-- Aside -->
<aside class="bsb-sidebar-1 offcanvas offcanvas-start" tabindex="-1" id="bsbSidebar1" aria-labelledby="bsbSidebarLabel1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="bsbSidebarLabel1">Offcanvas Sidebar</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</aside>
<!-- Footer -->
<footer class="footer bg-body-tertiary">
<div class="container">
<div class="row">
<div class="col">
<div class="py-3">
Built by <a href="https://bootstrapbrain.com/" class="link-secondary text-decoration-none">BootstrapBrain</a> with <span class="text-primary">♥</span>
</div>
</div>
</div>
</div>
</footer>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/components/navbars/navbar-3/assets/css/navbar-3.css">
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
The Bootstrap Free Admin Navbar is a pre-designed navigation bar tailored explicitly for integration into admin dashboards. This feature offers a responsive and customizable navigation solution utilizing the Bootstrap framework. The Bootstrap Free Admin Navbar typically provides a structured layout with navigation links, dropdown menus, and branding elements such as logos or icons. It often incorporates responsiveness, ensuring smooth adaptability across various screen sizes and devices. Additionally, it may offer customization options to match the dashboard's visual identity or accommodate specific navigation needs.
