Advanced Dropdowns
Multi-level, mega menu, profile and interactive dropdowns.
Mega Menu Dropdown
Featured
WebNexa Pro
Everything unlocked. Cancel anytime.
<div class="uk-dropdown-mega-wrap">
<button class="uk-dropdown-trigger">
Products <i class="fas fa-chevron-down"></i>
</button>
<div class="uk-dropdown-mega">
<div class="uk-dropdown-mega-col">
<div class="uk-dropdown-mega-heading">Design Tools</div>
<a href="#" class="uk-dropdown-mega-link">
<i class="fas fa-palette"></i>
<div>
<strong>Color Studio</strong>
<span>Generate perfect palettes</span>
</div>
</a>
</div>
<div class="uk-dropdown-mega-col highlight">
<div class="uk-dropdown-mega-featured">...</div>
</div>
</div>
</div>
<style>
.uk-dropdown-mega-wrap { position: relative; display: inline-block; }
.uk-dropdown-trigger {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.1rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
font-size: 0.85rem;
font-weight: 700;
color: #0b1b2f;
cursor: pointer;
}
.uk-dropdown-trigger.active {
border-color: #1e3a8a;
color: #1e3a8a;
}
.uk-dropdown-trigger i { font-size: 0.7rem; transition: transform 0.2s; }
.uk-dropdown-trigger.active i { transform: rotate(180deg); }
.uk-dropdown-mega {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 680px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
box-shadow: 0 20px 40px rgba(11, 27, 47, 0.12);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
overflow: hidden;
z-index: 10;
}
.uk-dropdown-mega-col {
padding: 1.25rem;
border-right: 1px solid #f1f5f9;
text-align: left;
}
.uk-dropdown-mega-col:last-child { border-right: 0; }
.uk-dropdown-mega-col.highlight { background: #f8fafc; }
.uk-dropdown-mega-heading {
font-size: 0.68rem;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.85rem;
}
.uk-dropdown-mega-link {
display: flex;
gap: 0.65rem;
padding: 0.6rem;
border-radius: 0.5rem;
text-decoration: none;
color: #475569;
transition: all 0.15s;
}
.uk-dropdown-mega-link:hover { background: #f1f5f9; }
.uk-dropdown-mega-link i {
width: 32px; height: 32px;
border-radius: 0.5rem;
background: #eef2f8;
color: #1e3a8a;
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem;
flex-shrink: 0;
}
.uk-dropdown-mega-link div { text-align: left; }
.uk-dropdown-mega-link strong {
display: block;
font-size: 0.82rem;
color: #0b1b2f;
font-weight: 700;
}
.uk-dropdown-mega-link span {
font-size: 0.72rem;
color: #94a3b8;
}
.uk-dropdown-mega-featured { text-align: center; }
.uk-dropdown-mega-icon {
width: 48px; height: 48px;
border-radius: 0.75rem;
background: #1e3a8a;
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.15rem;
margin-bottom: 0.75rem;
}
.uk-dropdown-mega-featured strong {
display: block;
font-size: 0.9rem;
font-weight: 800;
color: #0b1b2f;
margin-bottom: 0.25rem;
}
.uk-dropdown-mega-featured span {
display: block;
font-size: 0.75rem;
color: #64748b;
margin-bottom: 1rem;
}
.uk-dropdown-mega-btn {
padding: 0.5rem 1rem;
background: #1e3a8a;
color: #fff;
border: 0;
border-radius: 0.4rem;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
}
</style>
Multi-Level Menu
Profile
Settings
Notifications
Security
Two-factor
Sessions
Privacy
Log out
<div class="uk-dropdown-multi">
<div class="uk-dropdown-multi-item"><i class="fas fa-user"></i> Profile</div>
<div class="uk-dropdown-multi-item has-sub active">
<i class="fas fa-cog"></i> Settings <i class="fas fa-chevron-right"></i>
<div class="uk-dropdown-sub">
<div class="uk-dropdown-multi-item">Notifications</div>
<div class="uk-dropdown-multi-item has-sub">
Security <i class="fas fa-chevron-right"></i>
<div class="uk-dropdown-sub uk-dropdown-sub-right">
<div class="uk-dropdown-multi-item">Two-factor</div>
</div>
</div>
</div>
</div>
<div class="uk-dropdown-multi-sep"></div>
<div class="uk-dropdown-multi-item danger">Log out</div>
</div>
<style>
.uk-dropdown-multi {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
box-shadow: 0 20px 40px rgba(11, 27, 47, 0.12);
padding: 0.35rem;
}
.uk-dropdown-multi-item {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.65rem 0.85rem;
border-radius: 0.5rem;
font-size: 0.82rem;
font-weight: 600;
color: #475569;
cursor: pointer;
position: relative;
transition: all 0.15s;
text-align: left;
}
.uk-dropdown-multi-item > i:first-child { width: 16px; text-align: center; font-size: 0.8rem; }
.uk-dropdown-multi-item > i:last-child { margin-left: auto; font-size: 0.65rem; color: #cbd5e1; }
.uk-dropdown-multi-item:hover, .uk-dropdown-multi-item.active { background: #f1f5f9; color: #1e3a8a; }
.uk-dropdown-multi-item.danger { color: #dc2626; }
.uk-dropdown-multi-item.danger:hover { background: #fee2e2; color: #dc2626; }
.uk-dropdown-multi-sep {
height: 1px;
background: #f1f5f9;
margin: 0.35rem 0.5rem;
}
/* Submenu */
.uk-dropdown-sub {
position: absolute;
top: -0.35rem;
left: 100%;
min-width: 180px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
box-shadow: 0 20px 40px rgba(11, 27, 47, 0.12);
padding: 0.35rem;
display: none;
margin-left: 4px;
z-index: 2;
}
.uk-dropdown-multi-item.has-sub.active > .uk-dropdown-sub { display: block; }
.uk-dropdown-sub-right {
left: calc(100% + 4px);
top: -0.35rem;
}
</style>
User Profile Dropdown
Marcus Johnson
<div class="uk-dropdown-user">
<div class="uk-dropdown-user-head">
<img src="..." alt="">
<div>
<div class="uk-dropdown-user-name">Marcus Johnson</div>
<div class="uk-dropdown-user-email">[email protected]</div>
</div>
</div>
<div class="uk-dropdown-user-menu">
<a href="#" class="uk-dropdown-user-link"><i class="fas fa-user"></i> My profile</a>
<a href="#" class="uk-dropdown-user-link">
<i class="fas fa-cog"></i> Settings <kbd>⌘S</kbd>
</a>
<a href="#" class="uk-dropdown-user-link">
<i class="fas fa-moon"></i> Dark mode
<span class="uk-dropdown-toggle"><span></span></span>
</a>
</div>
<div class="uk-dropdown-user-sep"></div>
<a href="#" class="uk-dropdown-user-link danger">Sign out</a>
</div>
<style>
.uk-dropdown-user {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
box-shadow: 0 20px 40px rgba(11, 27, 47, 0.12);
overflow: hidden;
}
.uk-dropdown-user-head {
display: flex;
gap: 0.75rem;
padding: 1rem;
border-bottom: 1px solid #f1f5f9;
align-items: center;
background: #f8fafc;
}
.uk-dropdown-user-head img {
width: 40px; height: 40px;
border-radius: 50%;
object-fit: cover;
}
.uk-dropdown-user-head div { text-align: left; }
.uk-dropdown-user-name {
font-size: 0.85rem;
font-weight: 700;
color: #0b1b2f;
}
.uk-dropdown-user-email {
font-size: 0.72rem;
color: #94a3b8;
margin-top: 1px;
}
.uk-dropdown-user-menu { padding: 0.35rem; }
.uk-dropdown-user-link {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.65rem 0.75rem;
border-radius: 0.5rem;
font-size: 0.82rem;
font-weight: 600;
color: #475569;
text-decoration: none;
transition: all 0.15s;
text-align: left;
}
.uk-dropdown-user-link i:first-child { width: 16px; text-align: center; font-size: 0.8rem; }
.uk-dropdown-user-link:hover { background: #f1f5f9; color: #1e3a8a; }
.uk-dropdown-user-link kbd {
margin-left: auto;
font-size: 0.65rem;
padding: 2px 6px;
background: #f1f5f9;
color: #94a3b8;
border-radius: 4px;
border: 1px solid #e2e8f0;
}
.uk-dropdown-user-sep {
height: 1px;
background: #f1f5f9;
margin: 0 0.5rem;
}
.uk-dropdown-user-link.danger { color: #dc2626; margin: 0.35rem; }
.uk-dropdown-user-link.danger:hover { background: #fee2e2; color: #dc2626; }
/* Toggle */
.uk-dropdown-toggle {
margin-left: auto;
width: 32px; height: 18px;
border-radius: 999px;
background: #cbd5e1;
position: relative;
transition: background 0.15s;
}
.uk-dropdown-toggle span {
position: absolute;
top: 2px; left: 2px;
width: 14px; height: 14px;
background: #fff;
border-radius: 50%;
transition: transform 0.15s;
}
</style>
Notification Bell Dropdown
Notifications 4
Sarah commented on your post
2m ago
Ali liked your photo
15m ago
David started following you
1h ago
System Backup complete
3h ago
<div class="uk-dropdown-notif">
<div class="uk-dropdown-notif-head">
<div>Notifications <span class="uk-dropdown-badge">4</span></div>
<button class="uk-dropdown-notif-mark">Mark all read</button>
</div>
<div class="uk-dropdown-notif-list">
<div class="uk-dropdown-notif-item unread">
<div class="uk-dropdown-notif-icon"><i class="fas fa-comment"></i></div>
<div class="uk-dropdown-notif-body">
<div class="uk-dropdown-notif-title"><strong>Sarah</strong> commented</div>
<div class="uk-dropdown-notif-time">2m ago</div>
</div>
</div>
</div>
<div class="uk-dropdown-notif-foot"><a href="#">View all →</a></div>
</div>
<style>
.uk-dropdown-notif {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
box-shadow: 0 20px 40px rgba(11, 27, 47, 0.12);
overflow: hidden;
}
.uk-dropdown-notif-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.85rem 1rem;
border-bottom: 1px solid #f1f5f9;
font-weight: 700;
font-size: 0.88rem;
color: #0b1b2f;
}
.uk-dropdown-badge {
background: #dc2626;
color: #fff;
font-size: 0.65rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
margin-left: 6px;
}
.uk-dropdown-notif-mark {
background: transparent;
border: 0;
color: #1e3a8a;
font-size: 0.72rem;
font-weight: 700;
cursor: pointer;
}
.uk-dropdown-notif-list { max-height: 240px; overflow-y: auto; }
.uk-dropdown-notif-item {
display: flex;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid #f8fafc;
transition: background 0.15s;
cursor: pointer;
text-align: left;
}
.uk-dropdown-notif-item:hover { background: #f8fafc; }
.uk-dropdown-notif-item.unread { background: #f8fafc; }
.uk-dropdown-notif-icon {
width: 32px; height: 32px;
border-radius: 0.5rem;
background: #eef2f8;
color: #1e3a8a;
display: flex; align-items: center; justify-content: center;
font-size: 0.75rem;
flex-shrink: 0;
}
.uk-dropdown-notif-body { flex: 1; min-width: 0; }
.uk-dropdown-notif-title {
font-size: 0.8rem;
color: #0b1b2f;
line-height: 1.4;
}
.uk-dropdown-notif-time {
font-size: 0.68rem;
color: #94a3b8;
margin-top: 2px;
}
.uk-dropdown-notif-foot {
padding: 0.7rem;
text-align: center;
border-top: 1px solid #f1f5f9;
}
.uk-dropdown-notif-foot a {
font-size: 0.75rem;
font-weight: 700;
color: #1e3a8a;
text-decoration: none;
}
</style>
Filter Selector Dropdown
Status
2 selected
<div class="uk-dropdown-filter">
<div class="uk-dropdown-filter-head">
<span>Status</span>
<span class="uk-dropdown-filter-count">2 selected</span>
</div>
<label class="uk-dropdown-filter-item"><input type="checkbox" checked> <span>Active</span> <em>42</em></label>
<label class="uk-dropdown-filter-item"><input type="checkbox" checked> <span>Pending</span> <em>8</em></label>
<div class="uk-dropdown-filter-foot">
<button class="uk-dropdown-filter-clear">Clear</button>
<button class="uk-dropdown-filter-apply">Apply</button>
</div>
</div>
<style>
.uk-dropdown-filter {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
box-shadow: 0 20px 40px rgba(11, 27, 47, 0.12);
padding: 0.5rem;
}
.uk-dropdown-filter-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.65rem 0.65rem;
border-bottom: 1px solid #f1f5f9;
font-size: 0.8rem;
font-weight: 800;
color: #0b1b2f;
}
.uk-dropdown-filter-count {
font-size: 0.68rem;
font-weight: 600;
color: #94a3b8;
}
.uk-dropdown-filter-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.65rem;
border-radius: 0.4rem;
font-size: 0.82rem;
color: #475569;
cursor: pointer;
transition: background 0.15s;
}
.uk-dropdown-filter-item:hover { background: #f8fafc; }
.uk-dropdown-filter-item input { accent-color: #1e3a8a; cursor: pointer; }
.uk-dropdown-filter-item span { flex: 1; text-align: left; }
.uk-dropdown-filter-item em {
font-style: normal;
font-size: 0.7rem;
color: #94a3b8;
font-weight: 600;
}
.uk-dropdown-filter-foot {
display: flex;
gap: 0.5rem;
padding-top: 0.75rem;
border-top: 1px solid #f1f5f9;
margin-top: 0.5rem;
}
.uk-dropdown-filter-clear, .uk-dropdown-filter-apply {
flex: 1;
padding: 0.5rem;
border-radius: 0.4rem;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
}
.uk-dropdown-filter-clear {
background: transparent;
border: 1px solid #e2e8f0;
color: #64748b;
}
.uk-dropdown-filter-apply {
background: #1e3a8a;
color: #fff;
border: 0;
}
</style>
Split Button Dropdown
<div class="uk-dropdown-split">
<div class="uk-dropdown-split-group">
<button class="uk-dropdown-split-main"><i class="fas fa-play"></i> Run Pipeline</button>
<button class="uk-dropdown-split-arrow"><i class="fas fa-chevron-down"></i></button>
</div>
<div class="uk-dropdown-split-menu">
<button class="uk-dropdown-split-item">
<i class="fas fa-bolt"></i>
<div>
<strong>Run all</strong>
<span>Execute full pipeline</span>
</div>
</button>
</div>
</div>
<style>
.uk-dropdown-split {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
}
.uk-dropdown-split-group {
display: inline-flex;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 4px 12px rgba(30, 58, 138, 0.15);
}
.uk-dropdown-split-main {
padding: 0.6rem 1.1rem;
background: #1e3a8a;
color: #fff;
border: 0;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.uk-dropdown-split-main:hover { background: #0f2a5c; }
.uk-dropdown-split-arrow {
padding: 0.6rem 0.75rem;
background: #1e3a8a;
color: #fff;
border: 0;
border-left: 1px solid rgba(255,255,255,0.2);
font-size: 0.65rem;
cursor: pointer;
}
.uk-dropdown-split-arrow:hover { background: #0f2a5c; }
.uk-dropdown-split-menu {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
box-shadow: 0 20px 40px rgba(11, 27, 47, 0.12);
padding: 0.35rem;
width: 100%;
}
.uk-dropdown-split-item {
display: flex;
gap: 0.75rem;
padding: 0.65rem;
border-radius: 0.5rem;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
width: 100%;
transition: background 0.15s;
}
.uk-dropdown-split-item:hover { background: #f1f5f9; }
.uk-dropdown-split-item > i {
width: 32px; height: 32px;
border-radius: 0.5rem;
background: #eef2f8;
color: #1e3a8a;
display: flex; align-items: center; justify-content: center;
font-size: 0.8rem;
flex-shrink: 0;
}
.uk-dropdown-split-item strong {
display: block;
font-size: 0.8rem;
font-weight: 700;
color: #0b1b2f;
}
.uk-dropdown-split-item span {
display: block;
font-size: 0.7rem;
color: #94a3b8;
margin-top: 1px;
}
</style>