Headers
Component 1
<!-- Nayzak Header -->
<nav class="navbar navbar-expand-lg navbar-light border-bottom py-lg-0 py-3">
<div class="container">
<picture>
<source media="(min-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-brand.svg">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-toggle-brand.svg" alt="Nayzak">
</picture>
<button class="navbar-toggler collapsed border-0 shadow-none ms-md-4 ms-3 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#nayzakNav1" aria-controls="nayzakNav1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nayzakNav1">
<ul class="navbar-nav mx-auto mb-3 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown1" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Homepage
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown1">
<li><a class="dropdown-item" href="#">Homepage one</a></li>
<li><a class="dropdown-item" href="#">Homepage two</a></li>
<li><a class="dropdown-item" href="#">Homepage three</a></li>
<li><a class="dropdown-item" href="#">Homepage four</a></li>
<li><a class="dropdown-item" href="#">Homepage five</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow flex-column p-lg-4 p-3 pb-0" aria-labelledby="nayzakDropdown2">
<li>
<ul class="list-unstyled dropdown-mega-menu row row-cols-lg-3 row-cols-1 gy-lg-3 gy-2">
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">About</span></li>
<li><a class="dropdown-item" href="#">About one</a></li>
<li><a class="dropdown-item" href="#">About two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Pricing</span></li>
<li><a class="dropdown-item" href="#">Pricing one</a></li>
<li><a class="dropdown-item" href="#">Pricing two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Contact</span></li>
<li><a class="dropdown-item" href="#">Contact one</a></li>
<li><a class="dropdown-item" href="#">Contact two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Careers</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Account</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Misc</span></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Privacy</a></li>
<li><a class="dropdown-item" href="#">404</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown3" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown3">
<li><a class="dropdown-item" href="#">Blog home</a></li>
<li><a class="dropdown-item" href="#">Blog post</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Build</a>
</li>
</ul>
<div class="d-flex align-items-center gap-3">
<a href="#" class="btn-link link-dark fw-bold me-1">Docs</a>
<a href="#" class="btn btn-dark btn-sm rounded-pill">Purchase</a>
</div>
</div>
</div>
</nav>
Component 2
<!-- Nayzak Header -->
<nav class="navbar navbar-expand-lg navbar-light border-bottom py-lg-0 py-3">
<div class="container-fluid">
<picture>
<source media="(min-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-brand.svg">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-toggle-brand.svg" alt="Nayzak">
</picture>
<button class="navbar-toggler collapsed border-0 shadow-none ms-md-4 ms-3 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#nayzakNav2" aria-controls="nayzakNav2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nayzakNav2">
<ul class="navbar-nav mx-auto mb-3 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Homepage
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown4">
<li><a class="dropdown-item" href="#">Homepage one</a></li>
<li><a class="dropdown-item" href="#">Homepage two</a></li>
<li><a class="dropdown-item" href="#">Homepage three</a></li>
<li><a class="dropdown-item" href="#">Homepage four</a></li>
<li><a class="dropdown-item" href="#">Homepage five</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown5" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow flex-column p-lg-4 p-3 pb-0" aria-labelledby="nayzakDropdown5">
<li>
<ul class="list-unstyled dropdown-mega-menu row row-cols-lg-3 row-cols-1 gy-lg-3 gy-2">
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">About</span></li>
<li><a class="dropdown-item" href="#">About one</a></li>
<li><a class="dropdown-item" href="#">About two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Pricing</span></li>
<li><a class="dropdown-item" href="#">Pricing one</a></li>
<li><a class="dropdown-item" href="#">Pricing two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Contact</span></li>
<li><a class="dropdown-item" href="#">Contact one</a></li>
<li><a class="dropdown-item" href="#">Contact two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Careers</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Account</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Misc</span></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Privacy</a></li>
<li><a class="dropdown-item" href="#">404</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown6" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown6">
<li><a class="dropdown-item" href="#">Blog home</a></li>
<li><a class="dropdown-item" href="#">Blog post</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Build</a>
</li>
</ul>
<div class="d-flex align-items-center gap-3">
<a href="#" class="btn-link link-dark fw-bold me-1">Docs</a>
<a href="#" class="btn btn-dark btn-sm rounded-pill">Purchase</a>
</div>
</div>
</div>
</nav>
Component 3
<!-- Nayzak Header -->
<nav class="navbar navbar-expand-lg navbar-light border-bottom py-lg-0 py-3">
<div class="container">
<picture class="me-4">
<source media="(min-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-brand.svg">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-toggle-brand.svg" alt="Nayzak">
</picture>
<button class="navbar-toggler collapsed border-0 shadow-none ms-md-4 ms-3 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#nayzakNav3" aria-controls="nayzakNav3" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nayzakNav3">
<ul class="navbar-nav me-auto mb-3 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown7" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Homepage
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown7">
<li><a class="dropdown-item" href="#">Homepage one</a></li>
<li><a class="dropdown-item" href="#">Homepage two</a></li>
<li><a class="dropdown-item" href="#">Homepage three</a></li>
<li><a class="dropdown-item" href="#">Homepage four</a></li>
<li><a class="dropdown-item" href="#">Homepage five</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown8" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow flex-column p-lg-4 p-3 pb-0" aria-labelledby="nayzakDropdown8">
<li>
<ul class="list-unstyled dropdown-mega-menu row row-cols-lg-3 row-cols-1 gy-lg-3 gy-2">
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">About</span></li>
<li><a class="dropdown-item" href="#">About one</a></li>
<li><a class="dropdown-item" href="#">About two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Pricing</span></li>
<li><a class="dropdown-item" href="#">Pricing one</a></li>
<li><a class="dropdown-item" href="#">Pricing two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Contact</span></li>
<li><a class="dropdown-item" href="#">Contact one</a></li>
<li><a class="dropdown-item" href="#">Contact two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Careers</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Account</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Misc</span></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Privacy</a></li>
<li><a class="dropdown-item" href="#">404</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown9" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown9">
<li><a class="dropdown-item" href="#">Blog home</a></li>
<li><a class="dropdown-item" href="#">Blog post</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Build</a>
</li>
</ul>
<div class="d-flex align-items-center gap-3">
<a href="#" class="btn-link link-dark fw-bold me-1">Docs</a>
<a href="#" class="btn btn-dark btn-sm rounded-pill">Purchase</a>
</div>
</div>
</div>
</nav>
Component 4
<!-- Nayzak Header -->
<nav class="navbar navbar-expand-lg navbar-light border-bottom py-lg-0 py-3">
<div class="container-fluid">
<picture class="me-4">
<source media="(min-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-brand.svg">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-toggle-brand.svg" alt="Nayzak">
</picture>
<button class="navbar-toggler collapsed border-0 shadow-none ms-md-4 ms-3 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#nayzakNav4" aria-controls="nayzakNav4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nayzakNav4">
<ul class="navbar-nav me-auto mb-3 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown10" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Homepage
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown10">
<li><a class="dropdown-item" href="#">Homepage one</a></li>
<li><a class="dropdown-item" href="#">Homepage two</a></li>
<li><a class="dropdown-item" href="#">Homepage three</a></li>
<li><a class="dropdown-item" href="#">Homepage four</a></li>
<li><a class="dropdown-item" href="#">Homepage five</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown11" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow flex-column p-lg-4 p-3 pb-0" aria-labelledby="nayzakDropdown11">
<li>
<ul class="list-unstyled dropdown-mega-menu row row-cols-lg-3 row-cols-1 gy-lg-3 gy-2">
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">About</span></li>
<li><a class="dropdown-item" href="#">About one</a></li>
<li><a class="dropdown-item" href="#">About two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Pricing</span></li>
<li><a class="dropdown-item" href="#">Pricing one</a></li>
<li><a class="dropdown-item" href="#">Pricing two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Contact</span></li>
<li><a class="dropdown-item" href="#">Contact one</a></li>
<li><a class="dropdown-item" href="#">Contact two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Careers</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Account</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Misc</span></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Privacy</a></li>
<li><a class="dropdown-item" href="#">404</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown12" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown12">
<li><a class="dropdown-item" href="#">Blog home</a></li>
<li><a class="dropdown-item" href="#">Blog post</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Build</a>
</li>
</ul>
<div class="d-flex align-items-center gap-3">
<a href="#" class="btn-link link-dark fw-bold me-1">Docs</a>
<a href="#" class="btn btn-dark btn-sm rounded-pill">Purchase</a>
</div>
</div>
</div>
</nav>
Component 5
<!-- Nayzak Header -->
<nav class="navbar navbar-expand-lg navbar-light border-bottom py-lg-0 py-3">
<div class="container">
<picture>
<source media="(min-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-brand.svg">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-toggle-brand.svg" alt="Nayzak">
</picture>
<div class="d-flex align-items-center gap-ms-4 gap-3 ms-auto order-lg-last">
<a href="#"><i class="ti ti-search text-dark fs-1 fw-lighter mb-0"></i></a>
<a href="#"><i class="ti ti-user text-dark fs-1 fw-lighter mb-0"></i></a>
</div>
<button class="navbar-toggler collapsed border-0 shadow-none ms-md-4 ms-3 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#nayzakNav5" aria-controls="nayzakNav5" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nayzakNav5">
<ul class="navbar-nav mx-auto mb-3 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown13" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Homepage
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown13">
<li><a class="dropdown-item" href="#">Homepage one</a></li>
<li><a class="dropdown-item" href="#">Homepage two</a></li>
<li><a class="dropdown-item" href="#">Homepage three</a></li>
<li><a class="dropdown-item" href="#">Homepage four</a></li>
<li><a class="dropdown-item" href="#">Homepage five</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown14" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow flex-column p-lg-4 p-3 pb-0" aria-labelledby="nayzakDropdown14">
<li>
<ul class="list-unstyled dropdown-mega-menu row row-cols-lg-3 row-cols-1 gy-lg-3 gy-2">
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">About</span></li>
<li><a class="dropdown-item" href="#">About one</a></li>
<li><a class="dropdown-item" href="#">About two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Pricing</span></li>
<li><a class="dropdown-item" href="#">Pricing one</a></li>
<li><a class="dropdown-item" href="#">Pricing two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Contact</span></li>
<li><a class="dropdown-item" href="#">Contact one</a></li>
<li><a class="dropdown-item" href="#">Contact two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Careers</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Account</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Misc</span></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Privacy</a></li>
<li><a class="dropdown-item" href="#">404</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown15" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown15">
<li><a class="dropdown-item" href="#">Blog home</a></li>
<li><a class="dropdown-item" href="#">Blog post</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Build</a>
</li>
</ul>
</div>
</div>
</nav>
Component 6
<!-- Nayzak Header -->
<nav class="navbar navbar-expand-lg navbar-light border-bottom py-lg-0 py-3">
<div class="container-fluid">
<picture>
<source media="(min-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-brand.svg">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-toggle-brand.svg" alt="Nayzak">
</picture>
<div class="d-flex align-items-center gap-ms-4 gap-3 ms-auto order-lg-last">
<a href="#"><i class="ti ti-search text-dark fs-1 fw-lighter mb-0"></i></a>
<a href="#"><i class="ti ti-user text-dark fs-1 fw-lighter mb-0"></i></a>
</div>
<button class="navbar-toggler collapsed border-0 shadow-none ms-md-4 ms-3 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#nayzakNav6" aria-controls="nayzakNav6" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nayzakNav6">
<ul class="navbar-nav mx-auto mb-3 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown16" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Homepage
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown16">
<li><a class="dropdown-item" href="#">Homepage one</a></li>
<li><a class="dropdown-item" href="#">Homepage two</a></li>
<li><a class="dropdown-item" href="#">Homepage three</a></li>
<li><a class="dropdown-item" href="#">Homepage four</a></li>
<li><a class="dropdown-item" href="#">Homepage five</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown17" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow flex-column p-lg-4 p-3 pb-0" aria-labelledby="nayzakDropdown17">
<li>
<ul class="list-unstyled dropdown-mega-menu row row-cols-lg-3 row-cols-1 gy-lg-3 gy-2">
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">About</span></li>
<li><a class="dropdown-item" href="#">About one</a></li>
<li><a class="dropdown-item" href="#">About two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Pricing</span></li>
<li><a class="dropdown-item" href="#">Pricing one</a></li>
<li><a class="dropdown-item" href="#">Pricing two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Contact</span></li>
<li><a class="dropdown-item" href="#">Contact one</a></li>
<li><a class="dropdown-item" href="#">Contact two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Careers</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Account</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Misc</span></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Privacy</a></li>
<li><a class="dropdown-item" href="#">404</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown18" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown18">
<li><a class="dropdown-item" href="#">Blog home</a></li>
<li><a class="dropdown-item" href="#">Blog post</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Build</a>
</li>
</ul>
</div>
</div>
</nav>
Component 7
<!-- Nayzak Header -->
<nav class="navbar navbar-expand-lg navbar-light border-bottom py-lg-0 py-3">
<div class="container">
<picture>
<source media="(min-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-brand.svg">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-toggle-brand.svg" alt="Nayzak">
</picture>
<div class="d-flex align-items-center gap-ms-4 gap-3 ms-auto order-lg-last">
<a href="#"><i class="ti ti-search text-dark fs-1 fw-lighter mb-0"></i></a>
<a href="#"><img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/user1.png" alt="User" class="rounded-circle" width="48" height="48"></a>
</div>
<button class="navbar-toggler collapsed border-0 shadow-none ms-md-4 ms-3 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#nayzakNav7" aria-controls="nayzakNav7" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nayzakNav7">
<ul class="navbar-nav mx-auto mb-3 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown19" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Homepage
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown19">
<li><a class="dropdown-item" href="#">Homepage one</a></li>
<li><a class="dropdown-item" href="#">Homepage two</a></li>
<li><a class="dropdown-item" href="#">Homepage three</a></li>
<li><a class="dropdown-item" href="#">Homepage four</a></li>
<li><a class="dropdown-item" href="#">Homepage five</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown20" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow flex-column p-lg-4 p-3 pb-0" aria-labelledby="nayzakDropdown20">
<li>
<ul class="list-unstyled dropdown-mega-menu row row-cols-lg-3 row-cols-1 gy-lg-3 gy-2">
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">About</span></li>
<li><a class="dropdown-item" href="#">About one</a></li>
<li><a class="dropdown-item" href="#">About two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Pricing</span></li>
<li><a class="dropdown-item" href="#">Pricing one</a></li>
<li><a class="dropdown-item" href="#">Pricing two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Contact</span></li>
<li><a class="dropdown-item" href="#">Contact one</a></li>
<li><a class="dropdown-item" href="#">Contact two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Careers</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Account</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Misc</span></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Privacy</a></li>
<li><a class="dropdown-item" href="#">404</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown21" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown21">
<li><a class="dropdown-item" href="#">Blog home</a></li>
<li><a class="dropdown-item" href="#">Blog post</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Build</a>
</li>
</ul>
</div>
</div>
</nav>
Component 8
<!-- Nayzak Header -->
<nav class="navbar navbar-expand-lg navbar-light border-bottom py-lg-0 py-3">
<div class="container-fluid">
<picture>
<source media="(min-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-brand.svg">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-toggle-brand.svg" alt="Nayzak">
</picture>
<div class="d-flex align-items-center gap-ms-4 gap-3 ms-auto order-lg-last">
<a href="#"><i class="ti ti-search text-dark fs-1 fw-lighter mb-0"></i></a>
<a href="#"><img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/user1.png" alt="User" class="rounded-circle" width="48" height="48"></a>
</div>
<button class="navbar-toggler collapsed border-0 shadow-none ms-md-4 ms-3 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#nayzakNav8" aria-controls="nayzakNav8" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nayzakNav8">
<ul class="navbar-nav mx-auto mb-3 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown22" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Homepage
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown22">
<li><a class="dropdown-item" href="#">Homepage one</a></li>
<li><a class="dropdown-item" href="#">Homepage two</a></li>
<li><a class="dropdown-item" href="#">Homepage three</a></li>
<li><a class="dropdown-item" href="#">Homepage four</a></li>
<li><a class="dropdown-item" href="#">Homepage five</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown23" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow flex-column p-lg-4 p-3 pb-0" aria-labelledby="nayzakDropdown23">
<li>
<ul class="list-unstyled dropdown-mega-menu row row-cols-lg-3 row-cols-1 gy-lg-3 gy-2">
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">About</span></li>
<li><a class="dropdown-item" href="#">About one</a></li>
<li><a class="dropdown-item" href="#">About two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Pricing</span></li>
<li><a class="dropdown-item" href="#">Pricing one</a></li>
<li><a class="dropdown-item" href="#">Pricing two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Contact</span></li>
<li><a class="dropdown-item" href="#">Contact one</a></li>
<li><a class="dropdown-item" href="#">Contact two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Careers</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Account</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-50 pb-1">Misc</span></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Privacy</a></li>
<li><a class="dropdown-item" href="#">404</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown24" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown24">
<li><a class="dropdown-item" href="#">Blog home</a></li>
<li><a class="dropdown-item" href="#">Blog post</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Build</a>
</li>
</ul>
</div>
</div>
</nav>
Component 9
<!-- Nayzak Header -->
<nav class="navbar navbar-expand-lg navbar-dark bg-black-90 border-bottom py-lg-0 py-3">
<div class="container">
<picture>
<source media="(min-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-brand.svg">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-toggle-brand.svg" alt="Nayzak">
</picture>
<button class="navbar-toggler collapsed border-0 shadow-none ms-md-4 ms-3 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#nayzakNav9" aria-controls="nayzakNav9" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nayzakNav9">
<ul class="navbar-nav mx-auto mb-3 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown25" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Homepage
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 bg-black-90 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown25">
<li><a class="dropdown-item" href="#">Homepage one</a></li>
<li><a class="dropdown-item" href="#">Homepage two</a></li>
<li><a class="dropdown-item" href="#">Homepage three</a></li>
<li><a class="dropdown-item" href="#">Homepage four</a></li>
<li><a class="dropdown-item" href="#">Homepage five</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown26" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow flex-column p-lg-4 p-3 pb-0" aria-labelledby="nayzakDropdown26">
<li>
<ul class="list-unstyled dropdown-mega-menu row row-cols-lg-3 row-cols-1 gy-lg-3 gy-2">
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">About</span></li>
<li><a class="dropdown-item" href="#">About one</a></li>
<li><a class="dropdown-item" href="#">About two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Pricing</span></li>
<li><a class="dropdown-item" href="#">Pricing one</a></li>
<li><a class="dropdown-item" href="#">Pricing two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Contact</span></li>
<li><a class="dropdown-item" href="#">Contact one</a></li>
<li><a class="dropdown-item" href="#">Contact two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Careers</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Account</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Misc</span></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Privacy</a></li>
<li><a class="dropdown-item" href="#">404</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown27" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 bg-black-90 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown27">
<li><a class="dropdown-item" href="#">Blog home</a></li>
<li><a class="dropdown-item" href="#">Blog post</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Build</a>
</li>
</ul>
<div class="d-flex align-items-center gap-3">
<a href="#" class="link-light fw-bold me-1">Docs</a>
<a href="#" class="btn btn-light btn-sm rounded-pill">Purchase</a>
</div>
</div>
</div>
</nav>
Component 10
<!-- Nayzak Header -->
<nav class="navbar navbar-expand-lg navbar-dark bg-black-90 border-bottom py-lg-0 py-3">
<div class="container-fluid">
<picture>
<source media="(min-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-brand.svg">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-toggle-brand.svg" alt="Nayzak">
</picture>
<button class="navbar-toggler collapsed border-0 shadow-none ms-md-4 ms-3 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#nayzakNav10" aria-controls="nayzakNav10" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nayzakNav10">
<ul class="navbar-nav mx-auto mb-3 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown28" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Homepage
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 bg-black-90 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown28">
<li><a class="dropdown-item" href="#">Homepage one</a></li>
<li><a class="dropdown-item" href="#">Homepage two</a></li>
<li><a class="dropdown-item" href="#">Homepage three</a></li>
<li><a class="dropdown-item" href="#">Homepage four</a></li>
<li><a class="dropdown-item" href="#">Homepage five</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown29" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow flex-column p-lg-4 p-3 pb-0" aria-labelledby="nayzakDropdown29">
<li>
<ul class="list-unstyled dropdown-mega-menu row row-cols-lg-3 row-cols-1 gy-lg-3 gy-2">
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">About</span></li>
<li><a class="dropdown-item" href="#">About one</a></li>
<li><a class="dropdown-item" href="#">About two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Pricing</span></li>
<li><a class="dropdown-item" href="#">Pricing one</a></li>
<li><a class="dropdown-item" href="#">Pricing two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Contact</span></li>
<li><a class="dropdown-item" href="#">Contact one</a></li>
<li><a class="dropdown-item" href="#">Contact two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Careers</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Account</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Misc</span></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Privacy</a></li>
<li><a class="dropdown-item" href="#">404</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown30" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 bg-black-90 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown30">
<li><a class="dropdown-item" href="#">Blog home</a></li>
<li><a class="dropdown-item" href="#">Blog post</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Build</a>
</li>
</ul>
<div class="d-flex align-items-center gap-3">
<a href="#" class="link-light fw-bold me-1">Docs</a>
<a href="#" class="btn btn-light btn-sm rounded-pill">Purchase</a>
</div>
</div>
</div>
</nav>
Component 11
<!-- Nayzak Header -->
<nav class="navbar navbar-expand-lg navbar-dark bg-black-90 border-bottom py-lg-0 py-3">
<div class="container">
<picture class="me-4">
<source media="(min-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-brand.svg">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-toggle-brand.svg" alt="Nayzak">
</picture>
<button class="navbar-toggler collapsed border-0 shadow-none ms-md-4 ms-3 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#nayzakNav11" aria-controls="nayzakNav11" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nayzakNav11">
<ul class="navbar-nav me-auto mb-3 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown31" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Homepage
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown31">
<li><a class="dropdown-item" href="#">Homepage one</a></li>
<li><a class="dropdown-item" href="#">Homepage two</a></li>
<li><a class="dropdown-item" href="#">Homepage three</a></li>
<li><a class="dropdown-item" href="#">Homepage four</a></li>
<li><a class="dropdown-item" href="#">Homepage five</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown32" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow flex-column p-lg-4 p-3 pb-0" aria-labelledby="nayzakDropdown32">
<li>
<ul class="list-unstyled dropdown-mega-menu row row-cols-lg-3 row-cols-1 gy-lg-3 gy-2">
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">About</span></li>
<li><a class="dropdown-item" href="#">About one</a></li>
<li><a class="dropdown-item" href="#">About two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Pricing</span></li>
<li><a class="dropdown-item" href="#">Pricing one</a></li>
<li><a class="dropdown-item" href="#">Pricing two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Contact</span></li>
<li><a class="dropdown-item" href="#">Contact one</a></li>
<li><a class="dropdown-item" href="#">Contact two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Careers</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Account</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Misc</span></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Privacy</a></li>
<li><a class="dropdown-item" href="#">404</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown33" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown33">
<li><a class="dropdown-item" href="#">Blog home</a></li>
<li><a class="dropdown-item" href="#">Blog post</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Build</a>
</li>
</ul>
<div class="d-flex align-items-center gap-3">
<a href="#" class="link-light fw-bold me-1">Docs</a>
<a href="#" class="btn btn-light btn-sm rounded-pill">Purchase</a>
</div>
</div>
</div>
</nav>
Component 12
<!-- Nayzak Header -->
<nav class="navbar navbar-expand-lg navbar-dark bg-black-90 border-bottom py-lg-0 py-3">
<div class="container-fluid">
<picture class="me-4">
<source media="(min-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-brand.svg">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-toggle-brand.svg" alt="Nayzak">
</picture>
<button class="navbar-toggler collapsed border-0 shadow-none ms-md-4 ms-3 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#nayzakNav12" aria-controls="nayzakNav12" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nayzakNav12">
<ul class="navbar-nav me-auto mb-3 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown34" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Homepage
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown33">
<li><a class="dropdown-item" href="#">Homepage one</a></li>
<li><a class="dropdown-item" href="#">Homepage two</a></li>
<li><a class="dropdown-item" href="#">Homepage three</a></li>
<li><a class="dropdown-item" href="#">Homepage four</a></li>
<li><a class="dropdown-item" href="#">Homepage five</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown35" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow flex-column p-lg-4 p-3 pb-0" aria-labelledby="nayzakDropdown35">
<li>
<ul class="list-unstyled dropdown-mega-menu row row-cols-lg-3 row-cols-1 gy-lg-3 gy-2">
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">About</span></li>
<li><a class="dropdown-item" href="#">About one</a></li>
<li><a class="dropdown-item" href="#">About two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Pricing</span></li>
<li><a class="dropdown-item" href="#">Pricing one</a></li>
<li><a class="dropdown-item" href="#">Pricing two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Contact</span></li>
<li><a class="dropdown-item" href="#">Contact one</a></li>
<li><a class="dropdown-item" href="#">Contact two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Careers</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Account</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Misc</span></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Privacy</a></li>
<li><a class="dropdown-item" href="#">404</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown36" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown36">
<li><a class="dropdown-item" href="#">Blog home</a></li>
<li><a class="dropdown-item" href="#">Blog post</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Build</a>
</li>
</ul>
<div class="d-flex align-items-center gap-3">
<a href="#" class="link-light fw-bold me-1">Docs</a>
<a href="#" class="btn btn-light btn-sm rounded-pill">Purchase</a>
</div>
</div>
</div>
</nav>
Component 13
<!-- Nayzak Header -->
<nav class="navbar navbar-expand-lg navbar-dark bg-black-90 border-bottom py-lg-0 py-3">
<div class="container">
<picture>
<source media="(min-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-brand.svg">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-toggle-brand.svg" alt="Nayzak">
</picture>
<div class="d-flex align-items-center gap-ms-4 gap-3 ms-auto order-lg-last">
<a href="#"><i class="ti ti-search fs-1 fw-lighter text-white mb-0"></i></a>
<a href="#"><i class="ti ti-user fs-1 fw-lighter text-white mb-0"></i></a>
</div>
<button class="navbar-toggler collapsed border-0 shadow-none ms-md-4 ms-3 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#nayzakNav13" aria-controls="nayzakNav13" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nayzakNav13">
<ul class="navbar-nav mx-auto mb-3 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown37" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Homepage
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown37">
<li><a class="dropdown-item" href="#">Homepage one</a></li>
<li><a class="dropdown-item" href="#">Homepage two</a></li>
<li><a class="dropdown-item" href="#">Homepage three</a></li>
<li><a class="dropdown-item" href="#">Homepage four</a></li>
<li><a class="dropdown-item" href="#">Homepage five</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown38" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow flex-column p-lg-4 p-3 pb-0" aria-labelledby="nayzakDropdown38">
<li>
<ul class="list-unstyled dropdown-mega-menu row row-cols-lg-3 row-cols-1 gy-lg-3 gy-2">
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">About</span></li>
<li><a class="dropdown-item" href="#">About one</a></li>
<li><a class="dropdown-item" href="#">About two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Pricing</span></li>
<li><a class="dropdown-item" href="#">Pricing one</a></li>
<li><a class="dropdown-item" href="#">Pricing two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Contact</span></li>
<li><a class="dropdown-item" href="#">Contact one</a></li>
<li><a class="dropdown-item" href="#">Contact two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Careers</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Account</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Misc</span></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Privacy</a></li>
<li><a class="dropdown-item" href="#">404</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown39" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown39">
<li><a class="dropdown-item" href="#">Blog home</a></li>
<li><a class="dropdown-item" href="#">Blog post</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Build</a>
</li>
</ul>
</div>
</div>
</nav>
Component 14
<!-- Nayzak Header -->
<nav class="navbar navbar-expand-lg navbar-dark bg-black-90 border-bottom py-lg-0 py-3">
<div class="container-fluid">
<picture>
<source media="(min-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-brand.svg">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-toggle-brand.svg" alt="Nayzak">
</picture>
<div class="d-flex align-items-center gap-ms-4 gap-3 ms-auto order-lg-last">
<a href="#"><i class="ti ti-search fs-1 fw-lighter text-white mb-0"></i></a>
<a href="#"><i class="ti ti-user fs-1 fw-lighter text-white mb-0"></i></a>
</div>
<button class="navbar-toggler collapsed border-0 shadow-none ms-md-4 ms-3 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#nayzakNav14" aria-controls="nayzakNav14" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nayzakNav14">
<ul class="navbar-nav mx-auto mb-3 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown40" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Homepage
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown40">
<li><a class="dropdown-item" href="#">Homepage one</a></li>
<li><a class="dropdown-item" href="#">Homepage two</a></li>
<li><a class="dropdown-item" href="#">Homepage three</a></li>
<li><a class="dropdown-item" href="#">Homepage four</a></li>
<li><a class="dropdown-item" href="#">Homepage five</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown41" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow flex-column p-lg-4 p-3 pb-0" aria-labelledby="nayzakDropdown41">
<li>
<ul class="list-unstyled dropdown-mega-menu row row-cols-lg-3 row-cols-1 gy-lg-3 gy-2">
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">About</span></li>
<li><a class="dropdown-item" href="#">About one</a></li>
<li><a class="dropdown-item" href="#">About two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Pricing</span></li>
<li><a class="dropdown-item" href="#">Pricing one</a></li>
<li><a class="dropdown-item" href="#">Pricing two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Contact</span></li>
<li><a class="dropdown-item" href="#">Contact one</a></li>
<li><a class="dropdown-item" href="#">Contact two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Careers</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Account</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Misc</span></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Privacy</a></li>
<li><a class="dropdown-item" href="#">404</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown42" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown42">
<li><a class="dropdown-item" href="#">Blog home</a></li>
<li><a class="dropdown-item" href="#">Blog post</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Build</a>
</li>
</ul>
</div>
</div>
</nav>
Component 15
<!-- Nayzak Header -->
<nav class="navbar navbar-expand-lg navbar-dark bg-black-90 border-bottom py-lg-0 py-3">
<div class="container">
<picture>
<source media="(min-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-brand.svg">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-toggle-brand.svg" alt="Nayzak">
</picture>
<div class="d-flex align-items-center gap-ms-4 gap-3 ms-auto order-lg-last">
<a href="#"><i class="ti ti-search fs-1 fw-lighter text-white mb-0"></i></a>
<a href="#"><img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/user1.png" alt="User" class="rounded-circle" width="48" height="48"></a>
</div>
<button class="navbar-toggler collapsed border-0 shadow-none ms-md-4 ms-3 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#nayzakNav15" aria-controls="nayzakNav15" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nayzakNav15">
<ul class="navbar-nav mx-auto mb-3 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown43" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Homepage
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown43">
<li><a class="dropdown-item" href="#">Homepage one</a></li>
<li><a class="dropdown-item" href="#">Homepage two</a></li>
<li><a class="dropdown-item" href="#">Homepage three</a></li>
<li><a class="dropdown-item" href="#">Homepage four</a></li>
<li><a class="dropdown-item" href="#">Homepage five</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown44" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow flex-column p-lg-4 p-3 pb-0" aria-labelledby="nayzakDropdown44">
<li>
<ul class="list-unstyled dropdown-mega-menu row row-cols-lg-3 row-cols-1 gy-lg-3 gy-2">
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">About</span></li>
<li><a class="dropdown-item" href="#">About one</a></li>
<li><a class="dropdown-item" href="#">About two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Pricing</span></li>
<li><a class="dropdown-item" href="#">Pricing one</a></li>
<li><a class="dropdown-item" href="#">Pricing two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Contact</span></li>
<li><a class="dropdown-item" href="#">Contact one</a></li>
<li><a class="dropdown-item" href="#">Contact two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Careers</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Account</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Misc</span></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Privacy</a></li>
<li><a class="dropdown-item" href="#">404</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown45" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown45">
<li><a class="dropdown-item" href="#">Blog home</a></li>
<li><a class="dropdown-item" href="#">Blog post</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Build</a>
</li>
</ul>
</div>
</div>
</nav>
Component 16
<!-- Nayzak Header -->
<nav class="navbar navbar-expand-lg navbar-dark bg-black-90 border-bottom py-lg-0 py-3">
<div class="container-fluid">
<picture>
<source media="(min-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-brand.svg">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-toggle-brand.svg" alt="Nayzak">
</picture>
<div class="d-flex align-items-center gap-ms-4 gap-3 ms-auto order-lg-last">
<a href="#"><i class="ti ti-search fs-1 fw-lighter text-white mb-0"></i></a>
<a href="#"><img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/user1.png" alt="User" class="rounded-circle" width="48" height="48"></a>
</div>
<button class="navbar-toggler collapsed border-0 shadow-none ms-md-4 ms-3 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#nayzakNav16" aria-controls="nayzakNav16" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nayzakNav16">
<ul class="navbar-nav mx-auto mb-3 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown46" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Homepage
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown46">
<li><a class="dropdown-item" href="#">Homepage one</a></li>
<li><a class="dropdown-item" href="#">Homepage two</a></li>
<li><a class="dropdown-item" href="#">Homepage three</a></li>
<li><a class="dropdown-item" href="#">Homepage four</a></li>
<li><a class="dropdown-item" href="#">Homepage five</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown47" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pages
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow flex-column p-lg-4 p-3 pb-0" aria-labelledby="nayzakDropdown47">
<li>
<ul class="list-unstyled dropdown-mega-menu row row-cols-lg-3 row-cols-1 gy-lg-3 gy-2">
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">About</span></li>
<li><a class="dropdown-item" href="#">About one</a></li>
<li><a class="dropdown-item" href="#">About two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Pricing</span></li>
<li><a class="dropdown-item" href="#">Pricing one</a></li>
<li><a class="dropdown-item" href="#">Pricing two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Contact</span></li>
<li><a class="dropdown-item" href="#">Contact one</a></li>
<li><a class="dropdown-item" href="#">Contact two</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Careers</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Account</span></li>
<li><a class="dropdown-item" href="#">Vacancies</a></li>
<li><a class="dropdown-item" href="#">Job post</a></li>
</ul>
</li>
<li>
<ul class="list-unstyled">
<li><span class="px-lg-2 fs-7 text-black-40 pb-1">Misc</span></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><a class="dropdown-item" href="#">Privacy</a></li>
<li><a class="dropdown-item" href="#">404</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#" id="nayzakDropdown48" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blog
<i class="ti ti-chevron-down ps-1"></i>
</a>
<ul class="dropdown-menu rounded-12 border-0 bg-black-90 shadow p-lg-4 ps-3 p-0" aria-labelledby="nayzakDropdown48">
<li><a class="dropdown-item" href="#">Blog home</a></li>
<li><a class="dropdown-item" href="#">Blog post</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Build</a>
</li>
</ul>
</div>
</div>
</nav>