Custom Navigation Bar v1 Components
Navigation Bar
<![CDATA[
<nav class="navbar py-4">
<a href="#" class="navbar-brand">
<img src="../../images/logo.png" />
</a>
<div class="navbar-center">
<div class="btn-group">
<button class="btn-search">
<i data-lucide="search"></i> Search ...
</button>
</div>
</div>
<div class="navbar-right">
<button class="btn btn-pumpkin btn--md">
<i data-lucide="clock-arrow-up"></i> Upgrade
</button>
<div class="d-flex align-items-center">
<button class="btn btn--ghost btn-icon btn-icon--xl">
<i data-lucide="bell"></i>
</button>
<button class="btn btn--ghost btn-icon btn-icon--xl">
<i data-lucide="grip"></i>
</button>
<div class="user-dropdown">
<div class="dropdown dropdown--right">
<div class="dropdown__header">
<div class="avatar avatar--circular avatar--md">
<img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e"
alt="User avatar">
</div>
</div>
<div class="dropdown__content">
<div class="dropdown__section">
<div class="dropdown__section-title">User</div>
<a href="#" class="dropdown__item">
<div class="dropdown__item-icon">
<i data-lucide="calendar"></i>
</div>
<span class="dropdown__item-text">Profile</span>
</a>
<a href="#" class="dropdown__item">
<div class="dropdown__item-icon">
<i data-lucide="smile"></i>
</div>
<span class="dropdown__item-text">Theme</span>
</a>
<a href="#" class="dropdown__item">
<div class="dropdown__item-icon">
<i data-lucide="calculator"></i>
</div>
<span class="dropdown__item-text">Setting</span>
</a>
</div>
<div class="dropdown__section">
<div class="dropdown__section-title">Notificatoin</div>
<a href="#" class="dropdown__item">
<div class="dropdown__item-icon">
<i data-lucide="user"></i>
</div>
<span class="dropdown__item-text">New</span>
<span class="dropdown__item-right">3</span>
</a>
<a href="#" class="dropdown__item">
<div class="dropdown__item-icon">
<i data-lucide="credit-card"></i>
</div>
<span class="dropdown__item-text">Old</span>
<span class="dropdown__item-right">12</span>
</a>
<a href="#" class="dropdown__item">
<div class="dropdown__item-icon">
<i data-lucide="settings"></i>
</div>
<span class="dropdown__item-text">Fresh</span>
<span class="dropdown__item-right">32</span>
</a>
</div>
<div class="dropdown__section">
<a href="#" class="dropdown__item">
<div class="dropdown__item-icon">
<i data-lucide="user"></i>
</div>
<span class="dropdown__item-text">Trash</span>
</a>
<a href="#" class="dropdown__item">
<div class="dropdown__item-icon">
<i data-lucide="settings"></i>
</div>
<span class="dropdown__item-text">Log Out</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<div style="height: 500px"></div>
]]>