Silicon
Navbar
Responsive navigation header that includes support for branding, navigation, and more.
Add class navbar-sticky to navbar to make it stick to the top of the page when scrolling.
Supported content
<!-- Menu with dropdown + Button -->
<header class="navbar navbar-expand-lg bg-light shadow-sm">
<div class="container">
<a href="#" class="navbar-brand">
<img src="assets/img/logo.svg" width="47" alt="Silicon">
Silicon
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav id="navbarCollapse1" class="collapse navbar-collapse">
<hr class="d-lg-none mt-3 mb-2">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li>
<a href="#" class="dropdown-item">Action link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action link</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><a class="dropdown-item" href="#">Yet another link</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<a href="#" class="btn btn-primary btn-sm fs-sm rounded my-3 my-lg-0">
<i class="bx bx-user fs-lg me-2"></i>
Sign up
</a>
</nav>
</div>
</header>
<!-- Menu + Theme mode switch + Button -->
<header class="navbar navbar-expand-lg bg-light shadow-sm">
<div class="container">
<a href="#" class="navbar-brand">
<img src="assets/img/logo.svg" width="47" alt="Silicon">
Silicon
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="form-check form-switch mode-switch order-lg-2 ms-4 ms-lg-auto me-lg-4" data-bs-toggle="mode">
<input type="checkbox" class="form-check-input" id="theme-mode">
<label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Light</label>
<label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Dark</label>
</div>
<a href="#" class="btn btn-secondary btn-sm fs-sm rounded order-lg-3 d-none d-lg-inline-flex">
<i class="bx bx-log-in fs-lg me-2"></i>
Sign in
</a>
<nav id="navbarCollapse2" class="collapse navbar-collapse">
<hr class="d-lg-none mt-3 mb-2">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
</ul>
<a href="#" class="btn btn-secondary btn-sm fs-sm rounded my-3 d-lg-none">
<i class="bx bx-log-in fs-lg me-2"></i>
Sign in
</a>
</nav>
</div>
</header>
<!-- Menu + Search + Account + Shopping cart -->
<header class="d-flex flex-column bg-light shadow-sm">
<div id="searchCollapse" class="collapse order-lg-2">
<div class="container py-3 pt-lg-2 pb-lg-4">
<div class="position-relative">
<input type="search" class="form-control form-control-lg ps-5" placeholder="Search...">
<i class="bx bx-search fs-5 text-muted position-absolute top-50 start-0 translate-middle-y ms-3"></i>
</div>
</div>
</div>
<div class="navbar navbar-expand-lg order-lg-1">
<div class="container">
<a href="#" class="navbar-brand">
<img src="assets/img/logo.svg" width="47" alt="Silicon">
Silicon
</a>
<div class="d-flex align-items-center order-lg-2 ms-auto">
<a href="#searchCollapse" class="nav-link px-2" data-bs-toggle="collapse" aria-label="Search">
<i class="bx bx-search fs-4 mx-1"></i>
</a>
<a href="#" class="nav-link d-none d-lg-block px-2" aria-label="Account">
<i class="bx bx-user fs-4 mx-1"></i>
</a>
<a href="#" class="btn btn-icon btn-secondary rounded-circle position-relative ms-2" aria-label="Cart">
<span class="badge bg-danger rounded-circle position-absolute top-0 start-100 translate-middle-x ms-n1 mt-n2">2</span>
<i class="bx bx-cart fs-4"></i>
</a>
</div>
<button class="navbar-toggler ms-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse3" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav id="navbarCollapse3" class="collapse navbar-collapse">
<hr class="d-lg-none mt-3 mb-2">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contacts</a>
</li>
<li class="d-lg-none my-2"><hr></li>
<li class="nav-item d-lg-none">
<a href="#" class="nav-link">
<i class="bx bx-user fs-5 me-2"></i>
My account
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- Menu + Contact (Phone / Email) links -->
<header class="navbar navbar-expand-lg bg-light shadow-sm">
<div class="container">
<a href="#" class="navbar-brand">
<img src="assets/img/logo.svg" width="47" alt="Silicon">
Silicon
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex d-lg-none order-lg-3">
<a href="tel:4055550128" class="nav-link px-2 ms-2" aria-label="Phone">
<i class="bx bx-mobile-alt fs-2"></i>
</a>
<a href="mailto:hello@example.com" class="nav-link px-2" aria-label="Chat">
<i class="bx bx-chat fs-2"></i>
</a>
</div>
<div class="d-none d-lg-flex order-lg-3">
<a href="tel:4055550128" class="d-flex align-items-center text-decoration-none ms-4">
<i class="bx bx-mobile-alt fs-2 text-primary"></i>
<div class="fs-sm text-nowrap ps-2">
<h6 class="fs-sm mb-0">Call us</h6>
<span class="text-nav">(405) 555‑0128</span>
</div>
</a>
<a href="mailto:hello@example.com" class="d-flex align-items-center text-decoration-none ms-4">
<i class="bx bx-chat fs-2 text-primary"></i>
<div class="fs-sm ps-2">
<h6 class="fs-sm mb-0">Talk to us</h6>
<span class="text-nav">hello@example.com</span>
</div>
</a>
</div>
<nav id="navbarCollapse4" class="collapse navbar-collapse order-lg-2">
<hr class="d-lg-none mt-3 mb-2">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- User logged in state. User account dropdown -->
<header class="navbar navbar-expand-lg bg-light shadow-sm">
<div class="container">
<a href="#" class="navbar-brand">
<img src="assets/img/logo.svg" width="47" alt="Silicon">
Silicon
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse5" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="nav dropdown d-block order-lg-3 ms-4">
<a href="#" class="d-flex nav-link p-0" data-bs-toggle="dropdown">
<img src="assets/img/avatar/09.jpg" class="rounded-circle" width="48" alt="Avatar">
<div class="d-none d-sm-block ps-2">
<div class="fs-xs lh-1 opacity-60">Hello,</div>
<div class="fs-sm dropdown-toggle">Alexander</div>
</div>
</a>
<ul class="dropdown-menu dropdown-menu-end my-1" style="width: 14rem;">
<li>
<a href="#" class="dropdown-item d-flex align-items-center">
<i class="bx bx-shopping-bag fs-base opacity-60 me-2"></i>
Orders
<span class="bg-success rounded-circle mt-n2 ms-1" style="width: 5px; height: 5px;"></span>
<span class="ms-auto fs-xs text-muted">2</span>
</a>
</li>
<li>
<a href="#" class="dropdown-item d-flex align-items-center">
<i class="bx bx-dollar fs-base opacity-60 me-2"></i>
Sales
<span class="ms-auto fs-xs text-muted">$735.00</span>
</a>
</li>
<li>
<a href="#" class="dropdown-item d-flex align-items-center">
<i class="bx bx-chat fs-base opacity-60 me-2"></i>
Messages
<span class="bg-success rounded-circle mt-n2 ms-1" style="width: 5px; height: 5px;"></span>
<span class="ms-auto fs-xs text-muted">1</span>
</a>
</li>
<li>
<a href="#" class="dropdown-item d-flex align-items-center">
<i class="bx bx-group fs-base opacity-60 me-2"></i>
Followers
<span class="ms-auto fs-xs text-muted">146</span>
</a>
</li>
<li>
<a href="#" class="dropdown-item d-flex align-items-center">
<i class="bx bx-star fs-base opacity-60 me-2"></i>
Reviews
<span class="ms-auto fs-xs text-muted">15</span>
</a>
</li>
<li>
<a class="dropdown-item d-flex align-items-center" href="#">
<i class="bx bx-heart fs-base opacity-60 me-2"></i>
Favorites
<span class="ms-auto fs-xs text-muted">6</span>
</a>
</li>
<li class="dropdown-divider"></li>
<li>
<a class="dropdown-item d-flex align-items-center" href="#">
<i class="bx bx-log-out fs-base opacity-60 me-2"></i>
Sign out
</a>
</li>
</ul>
</div>
<nav id="navbarCollapse5" class="collapse navbar-collapse order-lg-2">
<hr class="d-lg-none mt-3 mb-2">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contacts</a>
</li>
</ul>
</nav>
</div>
</header>