Headers
Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar.
Header #1
Header #2
<!-- navbar login -->
<nav class="navbar navbar-expand-lg ">
<div class="container px-0">
<a class="navbar-brand" href="../index.html"><img src="../assets/images/brand/logo/logo.svg"
alt=""></a>
<div class="d-flex align-items-center order-lg-3 ms-lg-3">
<div class="d-flex align-items-center">
<a href="#" class="form-check form-switch theme-switch btn btn-light btn-icon rounded-circle me-2">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault"></label>
</a>
<a href="https://themes.getbootstrap.com/product/geeks-academy-admin-template/"
class="btn btn-outline-primary me-2 ">Sign in</a>
<a href="https://themes.getbootstrap.com/product/geeks-academy-admin-template/" class="btn btn-primary d-none d-md-block">Sign
up</a>
</div>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-default5"
aria-controls="navbar-default5" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar mt-0"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
</div>
<!-- Button -->
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbar-default5">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"
data-bs-display="static">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-arrow"
aria-labelledby="navbarDropdown">
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-list-group-item dropdown-toggle"
href="#">
Dropdown
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Action Link</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Anthor Action
</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Something else here
</a>
</li>
</ul>
</li>
<li>
<a href="#!" class="dropdown-item">
Action Link
</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Anthor Action
</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Something else here
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>Header #3
<nav class="navbar navbar-expand-lg ">
<div class="container-fluid px-0">
<a class="navbar-brand" href="../index.html"><img src="../assets/images/brand/logo/logo.svg"
alt="" ></a>
<div class="order-lg-3 d-flex align-items-center">
<div class="">
<div class="d-flex align-items-center">
<a href="#" class="form-check form-switch theme-switch btn btn-light btn-icon rounded-circle me-2">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault"></label>
</a>
<a href="#" class="btn btn-outline-primary shadow-sm me-1">Sign In</a>
<a href="#" class="btn btn-primary d-none d-md-block">Sign Up</a>
</div>
</div>
<!-- Button -->
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-default"
aria-controls="navbar-default" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar mt-0"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
</div>
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbar-default">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"
data-bs-display="static">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-arrow"
aria-labelledby="navbarDropdown">
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-list-group-item dropdown-toggle"
href="#">
Dropdown
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Action Link</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Anthor Action
</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Something else here
</a>
</li>
</ul>
</li>
<li>
<a href="#!" class="dropdown-item">
Action Link
</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Anthor Action
</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Something else here
</a>
</li>
</ul>
</li>
</ul>
<form class="mt-3 mt-lg-0 ms-lg-3 d-flex align-items-center">
<span class="position-absolute ps-3 search-icon">
<i class="fe fe-search"></i>
</span>
<input type="search" class="form-control ps-6" placeholder="Search Courses" >
</form>
</div>
</div>
</nav>Header #4
<nav class="navbar navbar-expand-lg navbar-transparent shadow-none">
<div class="container px-0">
<a class="navbar-brand" href="../index.html"
><img src="../assets/images/brand/logo/logo.svg" alt=""
></a>
<div class="d-flex align-items-center order-lg-3">
<div class="d-flex align-items-center">
<a href="#" class="form-check form-switch theme-switch btn btn-light btn-icon rounded-circle me-2 ">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault"></label>
</a>
<a href="https://themes.getbootstrap.com/product/geeks-academy-admin-template/" class="btn btn-primary ">Buy Now</a>
</div>
<div>
<button
class="navbar-toggler collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-default3"
aria-controls="navbar-default3"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="icon-bar top-bar mt-0"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
</div>
</div>
<!-- Button -->
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbar-default3">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"
data-bs-display="static">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-arrow"
aria-labelledby="navbarDropdown">
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-list-group-item dropdown-toggle"
href="#">
Dropdown
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Action Link</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Anthor Action
</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Something else here
</a>
</li>
</ul>
</li>
<li>
<a href="#!" class="dropdown-item">
Action Link
</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Anthor Action
</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Something else here
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>Header #5
<nav class="navbar navbar-expand-lg ">
<div class="container-fluid px-0">
<div class="d-flex">
<a class="navbar-brand" href="../index.html"><img
src="../assets/images/brand/logo/logo.svg"
alt="Geeks high quality website templates created with Bootstrap 5."></a>
<div class="dropdown d-none d-md-block">
<button class="btn btn-light-primary text-primary"
type="button" id="dropdownMenuButton1"
data-bs-toggle="dropdown" aria-expanded="false">
<i
class="fe fe-list me-2 align-middle "></i>Category
</button>
<ul class="dropdown-menu"
aria-labelledby="dropdownMenuButton1">
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-list-group-item dropdown-toggle"
href="#">
Web Development
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Bootstrap</a>
</li>
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
React
</a>
</li>
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
GraphQl</a>
</li>
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Gatsby</a>
</li>
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Grunt</a>
</li>
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Svelte</a>
</li>
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Meteor</a>
</li>
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
HTML5</a>
</li>
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Angular</a>
</li>
</ul>
</li>
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-list-group-item dropdown-toggle"
href="#">
Design
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Graphic Design</a>
</li>
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Illustrator
</a>
</li>
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
UX / UI Design</a>
</li>
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Figma Design</a>
</li>
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Adobe XD</a>
</li>
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Sketch</a>
</li>
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Icon Design</a>
</li>
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Photoshop</a>
</li>
</ul>
</li>
<li>
<a href="../pages/course-category.html"
class="dropdown-item">
Mobile App
</a>
</li>
<li>
<a href="../pages/course-category.html"
class="dropdown-item">
IT Software
</a>
</li>
<li>
<a href="../pages/course-category.html"
class="dropdown-item">
Marketing
</a>
</li>
<li>
<a href="../pages/course-category.html"
class="dropdown-item">
Music
</a>
</li>
<li>
<a href="../pages/course-category.html"
class="dropdown-item">
Life Style
</a>
</li>
<li>
<a href="../pages/course-category.html"
class="dropdown-item">
Business
</a>
</li>
<li>
<a href="../pages/course-category.html"
class="dropdown-item">
Photography
</a>
</li>
</ul>
</div>
</div>
<div class="order-lg-3">
<div class="d-flex align-items-center">
<a href="#"
class="form-check form-switch theme-switch btn btn-light btn-icon rounded-circle me-2">
<input class="form-check-input" type="checkbox"
role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label"
for="flexSwitchCheckDefault"></label>
</a>
<span class="d-none d-md-block">
<a href="#"
class="btn btn-icon btn-light rounded-circle"><i
class="fe fe-shopping-cart text-muted align-middle"></i>
</a>
</span>
<a href="../pages/sign-in.html"
class="btn btn-outline-primary ms-2">Sign in</a>
<a href="../pages/sign-up.html"
class="btn btn-primary ms-1 d-none d-lg-block">Sign
up</a>
<!-- Button -->
<button class="navbar-toggler collapsed" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-default2"
aria-controls="navbar-default2"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="icon-bar top-bar mt-0"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
</div>
</div>
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbar-default2">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"
data-bs-display="static">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-arrow"
aria-labelledby="navbarDropdown">
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-list-group-item dropdown-toggle"
href="#">
Dropdown
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Action Link</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Anthor Action
</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Something else here
</a>
</li>
</ul>
</li>
<li>
<a href="#!" class="dropdown-item">
Action Link
</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Anthor Action
</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Something else here
</a>
</li>
</ul>
</li>
<li class="nav-item dropdown dropdown-fullwidth">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Mega Menu
</a>
<div class="dropdown-menu dropdown-menu-md">
<div class="px-4 pt-2 pb-2">
<div class="row">
<div class="col-12">
<div class="lh-1 mb-5">
<h3 class="mb-1">Earn a Degree</h3>
<p>Breakthrough pricing on 100% online degrees designed to fit into your life.
</p>
</div>
</div>
<div class="col-lg-4 col-12">
<div class="border-bottom pb-2 mb-3">
<h5 class="mb-0">Degrees</h5>
</div>
<div class="">
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/degree-1.png" alt="">
<div class="ms-2">
<small class="text-body">University of Michigan</small>
<h6 class="mb-0">Master of Applied Data Science</h6>
</div>
</div>
</a>
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/degree-2.png" alt="">
<div class="ms-2">
<small class="text-body">A&B College 1980</small>
<h6 class="mb-0">MBA in Business Analytics</h6>
</div>
</div>
</a>
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/degree-3.png" alt="">
<div class="ms-2">
<small class="text-body">Imperial College London</small>
<h6 class="mb-0">Master of Science in Machine</h6>
</div>
</div>
</a>
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/degree-4.png" alt="">
<div class="ms-2">
<small class="text-body">University of Colorado</small>
<h6 class="mb-0">Master of Computer Science</h6>
</div>
</div>
</a>
<div class="mt-4">
<a href="#" class="btn btn-outline-primary btn-sm">View all degree</a>
</div>
</div>
</div>
<div class="col-lg-4 col-12 mt-4 mt-lg-0">
<div class="border-bottom pb-2 mb-3">
<h5 class="mb-0">Certificate Programs</h5>
</div>
<div class="">
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/google.png" alt="">
<div class="ms-2">
<small class="text-body">No Prerequisites</small>
<h6 class="mb-0">Google Data Analytics</h6>
</div>
</div>
</a>
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/IBM.png" alt="">
<div class="ms-2">
<small class="text-body">No Prerequisites</small>
<h6 class="mb-0">IBM Data Science</h6>
</div>
</div>
</a>
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/microsoft.png" alt="">
<div class="ms-2">
<small class="text-body">Expert Feedback</small>
<h6 class="mb-0">Machine Leaning for Analytics</h6>
</div>
</div>
</a>
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/tensorflow.png" alt="">
<div class="ms-2">
<small class="text-body">Certification Prerequisites</small>
<h6 class="mb-0">TensorFlow Developer Certificate</h6>
</div>
</div>
</a>
<a href="#">
<div class="d-flex mb-3">
<img src="../assets/images/png/meta.png" alt="">
<div class="ms-2">
<small class="text-body">University of Colorado</small>
<h6 class="mb-0">Meta Marketing Analytics</h6>
</div>
</div>
</a>
<div class="mt-4">
<a href="#" class="btn btn-outline-primary btn-sm">View all Certificates</a>
</div>
</div>
</div>
<div class="col-lg-4 col-12 mt-4 mt-lg-0">
<div class="border-bottom pb-2 mb-3">
<h5 class="mb-0">Popular Skills</h5>
</div>
<div class="">
<ul class="nav flex-column">
<li class="nav-item">
<a href="#" class="nav-link">Python</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">SQL</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Microsoft Excel</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Machine Learning</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Data Science</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Data Analytics</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Power BI</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Artificial Intelligence</a>
</li>
</ul>
<div class="mt-4">
<a href="#" class="btn btn-outline-primary btn-sm">View all Skills</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>Header #6
<nav class="navbar navbar-expand-lg ">
<div class="container-fluid px-0">
<a class="navbar-brand" href="../index.html"><img
src="../assets/images/brand/logo/logo.svg" alt=""
class=""></a>
<!-- Mobile view nav wrap -->
<div class="ms-auto d-flex align-items-center order-lg-3">
<div>
<a href="#"
class="form-check form-switch theme-switch btn btn-light btn-icon rounded-circle">
<input class="form-check-input" type="checkbox"
role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label"
for="flexSwitchCheckDefault"></label>
</a>
</div>
<ul class="navbar-nav navbar-right-wrap mx-2 flex-row">
<li
class="dropdown d-inline-block stopevent position-static">
<a class="btn btn-light btn-icon rounded-circle text-muted indicator indicator-primary"
href="#" role="button"
id="dropdownNotificationSecond"
data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fe fe-bell"> </i>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-lg position-absolute mx-3 my-5"
aria-labelledby="dropdownNotificationSecond">
<div>
<div
class="border-bottom px-3 pb-3 d-flex justify-content-between align-items-center">
<span
class="h5 mb-0">Notifications</span>
<a href="# " class="text-muted"><span
class="align-middle"><i
class="fe fe-settings me-1"></i></span></a>
</div>
<ul class="list-group list-group-flush "
style="height: 300px;" data-simplebar>
<li class="list-group-item bg-light">
<div class="row">
<div class="col">
<a class="text-body"
href="#">
<div class="d-flex">
<img src="../assets/images/avatar/avatar-1.jpg"
alt=""
class="avatar-md rounded-circle">
<div class="ms-3">
<h5
class="fw-bold mb-1">
Kristin
Watson:
</h5>
<p
class="mb-3 text-body">
Krisitn
Watsan like
your comment
on course
Javascript
Introduction!
</p>
<span
class="fs-6 text-muted">
<span><span
class="fe fe-thumbs-up text-success me-1"></span>2
hours
ago,</span>
<span
class="ms-1">2:19
PM</span>
</span>
</div>
</div>
</a>
</div>
<div
class="col-auto text-center me-2">
<a href="#"
class="badge-dot bg-info"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Mark as read">
</a>
<div>
<a href="#"
class="bg-transparent"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Remove">
<i
class="fe fe-x text-muted"></i>
</a>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col">
<a class="text-body"
href="#">
<div class="d-flex">
<img src="../assets/images/avatar/avatar-2.jpg"
alt=""
class="avatar-md rounded-circle">
<div class="ms-3">
<h5
class="fw-bold mb-1">
Brooklyn
Simmons
</h5>
<p
class="mb-3 text-body">
Just
launched a
new Courses
React for
Beginner.
</p>
<span
class="fs-6 text-muted">
<span><span
class="fe fe-thumbs-up text-success me-1"></span>Oct
9,</span>
<span
class="ms-1">1:20
PM</span>
</span>
</div>
</div>
</a>
</div>
<div
class="col-auto text-center me-2">
<a href="#"
class="badge-dot bg-secondary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Mark as unread">
</a>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col">
<a class="text-body"
href="#">
<div class="d-flex">
<img src="../assets/images/avatar/avatar-3.jpg"
alt=""
class="avatar-md rounded-circle">
<div class="ms-3">
<h5
class="fw-bold mb-1">
Jenny Wilson
</h5>
<p
class="mb-3 text-body">
Krisitn
Watsan like
your comment
on course
Javascript
Introduction!
</p>
<span
class="fs-6 text-muted">
<span><span
class="fe fe-thumbs-up text-info me-1"></span>Oct
9,</span>
<span
class="ms-1">1:56
PM</span>
</span>
</div>
</div>
</a>
</div>
<div
class="col-auto text-center me-2">
<a href="#"
class="badge-dot bg-secondary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Mark as unread">
</a>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col">
<a class="text-body"
href="#">
<div class="d-flex">
<img src="../assets/images/avatar/avatar-4.jpg"
alt=""
class="avatar-md rounded-circle">
<div class="ms-3">
<h5
class="fw-bold mb-1">
Sina Ray
</h5>
<p
class="mb-3 text-body">
You earn new
certificate
for complete
the
Javascript
Beginner
course.
</p>
<span
class="fs-6 text-muted">
<span><span
class="fe fe-award text-warning me-1"></span>Oct
9,</span>
<span
class="ms-1">1:56
PM</span>
</span>
</div>
</div>
</a>
</div>
<div
class="col-auto text-center me-2">
<a href="#"
class="badge-dot bg-secondary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Mark as unread">
</a>
</div>
</div>
</li>
</ul>
<div class="border-top px-3 pt-3 pb-0">
<a href="../pages/notification-history.html"
class="text-link fw-semibold">See
all Notifications</a>
</div>
</div>
</div>
</li>
<li
class="dropdown ms-2 d-inline-block position-static">
<a class="rounded-circle" href="#"
data-bs-toggle="dropdown"
data-bs-display="static" aria-expanded="false">
<div
class="avatar avatar-md avatar-indicators avatar-online">
<img alt="avatar"
src="../assets/images/avatar/avatar-1.jpg"
class="rounded-circle">
</div>
</a>
<div
class="dropdown-menu dropdown-menu-end position-absolute mx-3 my-5">
<div class="dropdown-item">
<div class="d-flex">
<div
class="avatar avatar-md avatar-indicators avatar-online">
<img alt="avatar"
src="../assets/images/avatar/avatar-1.jpg"
class="rounded-circle">
</div>
<div class="ms-3 lh-1">
<h5 class="mb-1">Annette Black</h5>
<p class="mb-0 text-muted">
annette@geeksui.com
</p>
</div>
</div>
</div>
<div class="dropdown-divider"></div>
<ul class="list-unstyled">
<li class="dropdown-submenu dropstart-lg">
<a class="dropdown-item dropdown-list-group-item dropdown-toggle"
href="#">
<i
class="fe fe-circle me-2"></i>Status
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="#">
<span
class="badge-dot bg-success me-2"></span>Online
</a>
</li>
<li>
<a class="dropdown-item"
href="#">
<span
class="badge-dot bg-secondary me-2"></span>Offline
</a>
</li>
<li>
<a class="dropdown-item"
href="#">
<span
class="badge-dot bg-warning me-2"></span>Away
</a>
</li>
<li>
<a class="dropdown-item"
href="#">
<span
class="badge-dot bg-danger me-2"></span>Busy
</a>
</li>
</ul>
</li>
<li>
<a class="dropdown-item"
href="../pages/profile-edit.html">
<i
class="fe fe-user me-2"></i>Profile
</a>
</li>
<li>
<a class="dropdown-item"
href="../pages/student-subscriptions.html">
<i
class="fe fe-star me-2"></i>Subscription
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i
class="fe fe-settings me-2"></i>Settings
</a>
</li>
</ul>
<div class="dropdown-divider"></div>
<ul class="list-unstyled">
<li>
<a class="dropdown-item"
href="../index.html">
<i class="fe fe-power me-2"></i>Sign
Out
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div>
<!-- Button -->
<button class="navbar-toggler collapsed" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar-default"
aria-controls="navbar-default" aria-expanded="false"
aria-label="Toggle navigation">
<span class="icon-bar top-bar mt-0"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
</div>
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbar-default">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"
data-bs-display="static">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-arrow"
aria-labelledby="navbarDropdown">
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-list-group-item dropdown-toggle"
href="#">
Dropdown
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="../pages/course-category.html">
Action Link</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Anthor Action
</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Something else here
</a>
</li>
</ul>
</li>
<li>
<a href="#!" class="dropdown-item">
Action Link
</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Anthor Action
</a>
</li>
<li>
<a href="#!" class="dropdown-item">
Something else here
</a>
</li>
</ul>
</li>
</ul>
<form
class="mt-3 mt-lg-0 ms-lg-3 d-flex align-items-center">
<span class="position-absolute ps-3 search-icon">
<i class="fe fe-search"></i>
</span>
<input type="search" class="form-control ps-6"
placeholder="Search Courses">
</form>
</div>
</div>
</nav>