Custom Dropdown Components

Dropdown

Drop Down
Profile
Billing
Settings
Calendar
Search Emoji
Calculator
<div style="width: 400px;"> <div class="combobox"> <div class="combobox__container"> <div class="combobox__header" id="comboboxHeader"> <span class="combobox__header-text">Drop Down</span> <i data-lucide="chevron-down" class="combobox__chevron"></i> </div> </div> <div class="combobox__dropdown" id="comboboxDropdown"> <div class="combobox__search"> <span class="combobox__search-icon"> <i data-lucide="search"></i> </span> <input type="text" class="combobox__search-input" placeholder="Type to search..."> </div> <div class="combobox__section"> <div class="combobox__item"> <span class="combobox__item-text">Profile</span> </div> <div class="combobox__item"> <span class="combobox__item-text">Billing</span> </div> <div class="combobox__item"> <span class="combobox__item-text">Settings</span> </div> <div class="combobox__item"> <span class="combobox__item-text">Calendar</span> </div> <div class="combobox__item"> <span class="combobox__item-text">Search Emoji</span> </div> <div class="combobox__item"> <span class="combobox__item-text">Calculator</span> </div> </div> </div> </div> </div>

Dropup

Drop Down
Profile
Billing
Settings
Calendar
Search Emoji
Calculator
<div style="width: 400px;"> <div class="combobox combobox--top"> <div class="combobox__container"> <div class="combobox__header"> <span class="combobox__header-text">Drop Down</span> <i data-lucide="chevron-down" class="combobox__chevron"></i> </div> </div> <div class="combobox__dropdown"> <div class="combobox__search"> <span class="combobox__search-icon"> <i data-lucide="search"></i> </span> <input type="text" class="combobox__search-input" placeholder="Type to search..."> </div> <div class="combobox__section"> <div class="combobox__item"> <span class="combobox__item-text">Profile</span> </div> <div class="combobox__item"> <span class="combobox__item-text">Billing</span> </div> <div class="combobox__item"> <span class="combobox__item-text">Settings</span> </div> <div class="combobox__item"> <span class="combobox__item-text">Calendar</span> </div> <div class="combobox__item"> <span class="combobox__item-text">Search Emoji</span> </div> <div class="combobox__item"> <span class="combobox__item-text">Calculator</span> </div> </div> </div> </div> </div>