Dropdown

vel-src: dropdown.css

A contextual menu that appears below a trigger element, used for navigation, actions, or selection lists.

Class	Properties
vel-dropdown	Wrapper element with position: relative for the dropdown
vel-dropdown-menu	The floating menu panel (position: absolute)
vel-dropdown-item	Individual clickable row inside the menu
vel-dropdown-item-active	Highlighted/selected state for a menu item
vel-dropdown-item-disabled	Dimmed, non-interactive menu item
vel-dropdown-divider	Horizontal rule separator between menu groups
vel-dropdown-header	Non-interactive label/heading inside the menu

Examples

Dropdown menu

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif">
  <div class="vel-dropdown">
    <button class="vel-btn vel-btn-primary">Options ▾</button>
    <div class="vel-dropdown-menu" style="display:block;position:relative;margin-top:8px;">
      <div class="vel-dropdown-header">Account</div>
      <a href="#" class="vel-dropdown-item">Profile</a>
      <a href="#" class="vel-dropdown-item">Settings</a>
      <a href="#" class="vel-dropdown-item vel-dropdown-item-active">Dashboard</a>
      <div class="vel-dropdown-divider"></div>
      <div class="vel-dropdown-header">Danger Zone</div>
      <a href="#" class="vel-dropdown-item">Delete account</a>
      <a href="#" class="vel-dropdown-item vel-dropdown-item-disabled">Suspended action</a>
    </div>
  </div>
</div>