โœฆ Navigation Components

Modern Dropdowns

Beautiful futuristic dropdown components crafted for premium dashboards and modern websites.

BASIC

Simple Dropdown

Clean modern dropdown menu with smooth transitions.

Dashboard
Analytics
Settings
Logout 
<div class="dropdown-wrapper">
  <button class="dropdown-btn">
    Select Option
    <i class="fa-solid fa-chevron-down"></i>
  </button>
  <div class="dropdown-menu">
    <div class="dropdown-item">Dashboard</div>
    <div class="dropdown-item">Analytics</div>
    <div class="dropdown-item">Settings</div>
    <div class="dropdown-item">Logout</div>
  </div>
</div>
PROFILE

Profile Menu

Beautiful profile dropdown with icon based navigation.

Profile
Settings
Saved
Logout 
<div class="dropdown-wrapper">
  <button class="dropdown-btn profile-btn">
    <img src="https://i.pravatar.cc/100" alt="">
    Chinmay
    <i class="fa-solid fa-chevron-down"></i>
  </button>
  <div class="dropdown-menu">
    <div class="dropdown-item">
      <i class="fa-solid fa-user"></i> Profile
    </div>
    <div class="dropdown-item">
      <i class="fa-solid fa-gear"></i> Settings
    </div>
    <div class="dropdown-item">
      <i class="fa-solid fa-bookmark"></i> Saved
    </div>
    <div class="dropdown-item logout">
      <i class="fa-solid fa-right-from-bracket"></i> Logout
    </div>
  </div>
</div>
ADVANCED

Notification Dropdown

Interactive dropdown panel perfect for notifications and activity feeds.

Deployment Successful 2 min ago
New Component Added 10 min ago
Trending UI Layout 1 hour ago 
<div class="dropdown-wrapper notification-wrap">
  <button class="dropdown-btn notification-btn">
    <i class="fa-solid fa-bell"></i> Notifications
    <span class="badge">4</span>
  </button>
  <div class="dropdown-menu notification-menu">
    <div class="notify-item">
      <div class="notify-icon green"><i class="fa-solid fa-check"></i></div>
      <div>
        <strong>Deployment Successful</strong>
        <span>2 min ago</span>
      </div>
    </div>
    <div class="notify-item">
      <div class="notify-icon purple-bg"><i class="fa-solid fa-code"></i></div>
      <div>
        <strong>New Component Added</strong>
        <span>10 min ago</span>
      </div>
    </div>
    <div class="notify-item">
      <div class="notify-icon orange-bg"><i class="fa-solid fa-fire"></i></div>
      <div>
        <strong>Trending UI Layout</strong>
        <span>1 hour ago</span>
      </div>
    </div>
  </div>
</div>
NESTED MENU

Nested Dropdown

Tiered option menus that reveal secondary slide-out panels on hover.

Share Project
Email Link
Copy Link
Slack
Preferences
Permissions
Themes
Export Raw File 
<div class="dropdown-wrapper multilevel-wrap">
  <button class="dropdown-btn">
    <span>Options Menu</span>
    <i class="fa-solid fa-chevron-down"></i>
  </button>
  <div class="dropdown-menu">
    <div class="dropdown-item">
      <i class="fa-solid fa-file-export"></i> Share Project
      <i class="fa-solid fa-chevron-right submenu-arrow"></i>
      <div class="dropdown-submenu">
        <div class="dropdown-item">Email Link</div>
        <div class="dropdown-item">Copy Link</div>
        <div class="dropdown-item">Slack</div>
      </div>
    </div>
    <div class="dropdown-item">
      <i class="fa-solid fa-pen-to-square"></i> Preferences
      <i class="fa-solid fa-chevron-right submenu-arrow"></i>
      <div class="dropdown-submenu">
        <div class="dropdown-item">Permissions</div>
        <div class="dropdown-item">Themes</div>
      </div>
    </div>
    <div class="dropdown-item"><i class="fa-solid fa-download"></i> Export Raw File</div>
  </div>
</div>
SEARCHABLE

Searchable Select

Filterable selection dropdown optimal for search and tag management.

๐Ÿ‡บ๐Ÿ‡ธ United States
๐Ÿ‡ฌ๐Ÿ‡ง United Kingdom
๐Ÿ‡ฉ๐Ÿ‡ช Germany
๐Ÿ‡ฎ๐Ÿ‡ณ India
๐Ÿ‡ฏ๐Ÿ‡ต Japan 
<div class="dropdown-wrapper searchable-wrap">
  <button class="dropdown-btn">
    <span>Select Country</span>
    <i class="fa-solid fa-chevron-down"></i>
  </button>
  <div class="dropdown-menu">
    <div class="search-input-wrapper">
      <i class="fa-solid fa-magnifying-glass"></i>
      <input type="text" class="dropdown-search-input" placeholder="Search country...">
    </div>
    <div class="dropdown-items-list">
      <div class="dropdown-item"><span class="flag">๐Ÿ‡บ๐Ÿ‡ธ</span> United States</div>
      <div class="dropdown-item"><span class="flag">๐Ÿ‡ฌ๐Ÿ‡ง</span> United Kingdom</div>
      <div class="dropdown-item"><span class="flag">๐Ÿ‡ฉ๐Ÿ‡ช</span> Germany</div>
      <div class="dropdown-item"><span class="flag">๐Ÿ‡ฎ๐Ÿ‡ณ</span> India</div>
      <div class="dropdown-item"><span class="flag">๐Ÿ‡ฏ๐Ÿ‡ต</span> Japan</div>
    </div>
  </div>
</div>
ACTIONS

Quick Actions

Clean context-style menu containing shortcut badges and destructive alerts.

Rename File โŒ˜R
Duplicate โŒ˜D
Add to Favorites โŒ˜F
Move to Trash โŒ˜โŒซ 
<div class="dropdown-wrapper actions-wrap">
  <button class="dropdown-btn actions-btn" aria-label="Action Menu">
    <i class="fa-solid fa-ellipsis-vertical"></i>
  </button>
  <div class="dropdown-menu actions-menu">
    <div class="dropdown-item">
      <i class="fa-solid fa-file-pen"></i> Rename File
      <kbd class="shortcut">โŒ˜R</kbd>
    </div>
    <div class="dropdown-item">
      <i class="fa-solid fa-copy"></i> Duplicate
      <kbd class="shortcut">โŒ˜D</kbd>
    </div>
    <div class="dropdown-item">
      <i class="fa-solid fa-star-half-stroke"></i> Add to Favorites
      <kbd class="shortcut">โŒ˜F</kbd>
    </div>
    <div class="divider"></div>
    <div class="dropdown-item delete-action">
      <i class="fa-solid fa-trash-can"></i> Move to Trash
      <kbd class="shortcut">โŒ˜โŒซ</kbd>
    </div>
  </div>
</div>
RICH MEDIA

Rich Mega Dropdown

Productivity grid containing headers, rich-styled list options, and links.

PRODUCTIVITY
Task Manager Track team projects and tasks
Analytics Tool Visualize conversion funnels
SECURITY
Auth Shield Secure user authentication
Cloud Backup Encrypted cloud asset storage
Explore All Solutions 
<div class="dropdown-wrapper mega-wrap">
  <button class="dropdown-btn">
    <span>Browse Solutions</span>
    <i class="fa-solid fa-chevron-down"></i>
  </button>
  <div class="dropdown-menu mega-menu">
    <div class="mega-grid">
      <div class="mega-col">
        <span class="mega-title">PRODUCTIVITY</span>
        <div class="mega-item">
          <i class="fa-solid fa-briefcase"></i>
          <div>
            <strong>Task Manager</strong>
            <span>Track team projects and tasks</span>
          </div>
        </div>
        <div class="mega-item">
          <i class="fa-solid fa-chart-line"></i>
          <div>
            <strong>Analytics Tool</strong>
            <span>Visualize conversion funnels</span>
          </div>
        </div>
      </div>
      <div class="mega-col">
        <span class="mega-title">SECURITY</span>
        <div class="mega-item">
          <i class="fa-solid fa-shield-halved"></i>
          <div>
            <strong>Auth Shield</strong>
            <span>Secure user authentication</span>
          </div>
        </div>
        <div class="mega-item">
          <i class="fa-solid fa-cloud-arrow-up"></i>
          <div>
            <strong>Cloud Backup</strong>
            <span>Encrypted cloud asset storage</span>
          </div>
        </div>
      </div>
    </div>
    <div class="mega-footer">
      <a href="#">Explore All Solutions</a>
    </div>
  </div>
</div>
GEOLOCATION

Region & Currency

Select localization parameters containing active checkmarks and flag assets.

๐Ÿ‡บ๐Ÿ‡ธ English (USD)
๐Ÿ‡ฉ๐Ÿ‡ช Deutsch (EUR)
๐Ÿ‡ฏ๐Ÿ‡ต ๆ—ฅๆœฌ่ชž (JPY)
๐Ÿ‡ซ๐Ÿ‡ท Franรงais (EUR) 
<div class="dropdown-wrapper language-wrap">
  <button class="dropdown-btn lang-select-btn">
    <span>English (USD)</span>
    <i class="fa-solid fa-chevron-down"></i>
  </button>
  <div class="dropdown-menu">
    <div class="dropdown-item active-lang">
      <span class="lang-flag">๐Ÿ‡บ๐Ÿ‡ธ</span> English (USD)
      <i class="fa-solid fa-circle-check check-icon"></i>
    </div>
    <div class="dropdown-item">
      <span class="lang-flag">๐Ÿ‡ฉ๐Ÿ‡ช</span> Deutsch (EUR)
      <i class="fa-solid fa-circle check-icon empty"></i>
    </div>
    <div class="dropdown-item">
      <span class="lang-flag">๐Ÿ‡ฏ๐Ÿ‡ต</span> ๆ—ฅๆœฌ่ชž (JPY)
      <i class="fa-solid fa-circle check-icon empty"></i>
    </div>
    <div class="dropdown-item">
      <span class="lang-flag">๐Ÿ‡ซ๐Ÿ‡ท</span> Franรงais (EUR)
      <i class="fa-solid fa-circle check-icon empty"></i>
    </div>
  </div>
</div>
FILTER

Status Filter

Quick status selector with pills, counts, and a subtle active state.

All 128
Completed 52
In review 19
Blocked 7 
<div class="dropdown-wrapper status-wrap">
  <button class="dropdown-btn">
    <span>All statuses</span>
    <i class="fa-solid fa-chevron-down"></i>
  </button>
  <div class="dropdown-menu status-menu">
    <div class="dropdown-item"><i class="fa-solid fa-layer-group"></i> <span>All</span> <span class="count-pill">128</span></div>
    <div class="dropdown-item"><i class="fa-solid fa-circle-check"></i> <span>Completed</span> <span class="count-pill green">52</span></div>
    <div class="dropdown-item"><i class="fa-solid fa-clock"></i> <span>In review</span> <span class="count-pill purple">19</span></div>
    <div class="dropdown-item"><i class="fa-solid fa-triangle-exclamation"></i> <span>Blocked</span> <span class="count-pill red">7</span></div>
  </div>
</div>
THEMES

Theme Swatches

Visual color choices with gradient swatches and a compact preview grid.

Midnight
Sunset
Mint
Royal
Tip: Pick a theme for your dashboard. 
<div class="dropdown-wrapper swatch-wrap">
  <button class="dropdown-btn">
    <span>Midnight</span>
    <i class="fa-solid fa-chevron-down"></i>
  </button>
  <div class="dropdown-menu swatch-menu">
    <div class="swatch-grid">
      <div class="dropdown-item swatch-item"><span class="swatch-dot swatch-midnight"></span> <span>Midnight</span> <i class="fa-solid fa-circle-check check-icon"></i></div>
      <div class="dropdown-item swatch-item"><span class="swatch-dot swatch-sunset"></span> <span>Sunset</span> <i class="fa-solid fa-circle check-icon empty"></i></div>
      <div class="dropdown-item swatch-item"><span class="swatch-dot swatch-mint"></span> <span>Mint</span> <i class="fa-solid fa-circle check-icon empty"></i></div>
      <div class="dropdown-item swatch-item"><span class="swatch-dot swatch-royal"></span> <span>Royal</span> <i class="fa-solid fa-circle check-icon empty"></i></div>
    </div>
  </div>
</div>
TEAMS

Workspace Switcher

Fast workspace switching with avatars, roles, and a pinned active team.

UIverse Studio Owner
Design Lab Member
Ops Squad Viewer
Create workspace 
<div class="dropdown-wrapper workspace-wrap">
  <button class="dropdown-btn profile-btn">
    <img src="https://i.pravatar.cc/100?img=13" alt="">
    <span>UIverse Studio</span>
    <i class="fa-solid fa-chevron-down"></i>
  </button>
  <div class="dropdown-menu workspace-menu">
    <div class="dropdown-item active-team">...</div>
    <div class="dropdown-item">...</div>
  </div>
</div>
ANALYTICS

Date Range

Compact date range picker layout for dashboards (static UI, no calendar JS).

Today
Last 7 days
Last 30 days
This quarter
<div class="dropdown-wrapper daterange-wrap">
  <button class="dropdown-btn">
    <span>Last 30 days</span>
    <i class="fa-solid fa-chevron-down"></i>
  </button>
  <div class="dropdown-menu daterange-menu">...</div>
</div>
SORTING

Priority Sort

Radio-style sort options with an inline check indicator and descriptions.

Recommended Balanced for most lists
Newest Recently updated first
Highest priority Urgent tasks on top 
<div class="dropdown-wrapper sort-wrap">
  <button class="dropdown-btn">
    <span>Sort: Recommended</span>
    <i class="fa-solid fa-chevron-down"></i>
  </button>
  <div class="dropdown-menu sort-menu">
    <div class="dropdown-item sort-item">...</div>
  </div>
</div>
Copied to clipboard!