Custom Normal Dropdown Components

Dropdown Left

User avatar
Suggestions
Calendar
Search Emoji
Calculator
Settings
Profile 3
Billing 12
Settings 32
<div class="dropdown dropdown--left"> <div class="dropdown__header"> <div class="avatar avatar--circular avatar--sm"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar"> <span class="avatar__notification avatar__notification--bottom avatar__notification--success"></span> </div> <i data-lucide="chevron-down" class="dropdown__chevron"></i> </div> <div class="dropdown__content"> <div class="dropdown__section"> <div class="dropdown__section-title">Suggestions</div> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="calendar"></i> </div> <span class="dropdown__item-text">Calendar</span> </div> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="smile"></i> </div> <span class="dropdown__item-text">Search Emoji</span> </div> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="calculator"></i> </div> <span class="dropdown__item-text">Calculator</span> </div> </div> <div class="dropdown__section"> <div class="dropdown__section-title">Settings</div> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="user"></i> </div> <span class="dropdown__item-text">Profile</span> <span class="dropdown__item-right">3</span> </div> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="credit-card"></i> </div> <span class="dropdown__item-text">Billing</span> <span class="dropdown__item-right">12</span> </div> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="settings"></i> </div> <span class="dropdown__item-text">Settings</span> <span class="dropdown__item-right">32</span> </div> </div> </div> </div>

Dropdown For Navbar

User avatar
User avatar
Signed in as
[email protected]
Profile
Manage Apps
Sign Out
<div class="dropdown dropdown--left"> <div class="dropdown__header"> <div class="avatar avatar--circular avatar--sm"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar"> <span class="avatar__notification avatar__notification--bottom avatar__notification--success"></span> </div> <i data-lucide="chevron-down" class="dropdown__chevron"></i> </div> <div class="dropdown__content py-2"> <div class="dropdown__section"> <div class="dropdown__item"> <div class="d-flex"> <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> <div class="dropdown__item-text">Signed in as</div> <div class="dropdown__item-subtext font-bold">johndoe@example.com</div> </div> </div> </div> <div class="dropdown__section"> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="user"></i> </div> <span class="dropdown__item-text">Profile</span> </div> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="layout-grid"></i> </div> <span class="dropdown__item-text">Manage Apps</span> </div> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="log-out"></i> </div> <span class="dropdown__item-text">Sign Out</span> </div> </div> </div> </div>

Dropdown Right

User avatar
Suggestions
Calendar
Search Emoji
Calculator
Settings
Profile 3
Billing 12
Settings 32
<div class="dropdown dropdown--right"> <div class="dropdown__header"> <div class="avatar avatar--circular avatar--sm"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar"> <span class="avatar__notification avatar__notification--bottom avatar__notification--success"></span> </div> <i data-lucide="chevron-down" class="dropdown__chevron"></i> </div> <div class="dropdown__content"> <div class="dropdown__section"> <div class="dropdown__section-title">Suggestions</div> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="calendar"></i> </div> <span class="dropdown__item-text">Calendar</span> </div> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="smile"></i> </div> <span class="dropdown__item-text">Search Emoji</span> </div> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="calculator"></i> </div> <span class="dropdown__item-text">Calculator</span> </div> </div> <div class="dropdown__section"> <div class="dropdown__section-title">Settings</div> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="user"></i> </div> <span class="dropdown__item-text">Profile</span> <span class="dropdown__item-right">3</span> </div> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="credit-card"></i> </div> <span class="dropdown__item-text">Billing</span> <span class="dropdown__item-right">12</span> </div> <div class="dropdown__item"> <div class="dropdown__item-icon"> <i data-lucide="settings"></i> </div> <span class="dropdown__item-text">Settings</span> <span class="dropdown__item-right">32</span> </div> </div> </div> </div>