Docs / Menu

Menu

vel-src: menu.css

A styled list of navigation links or actions, supporting vertical sidebar layouts and horizontal navigation bars.

ClassProperties
vel-menuBase menu container (vertical by default)
vel-menu-itemIndividual menu row with padding and hover state
vel-menu-item-activeHighlighted state for the currently selected menu item
vel-menu-item-disabledDimmed, non-interactive menu item
vel-menu-labelNon-interactive section heading within the menu
vel-menu-dividerHorizontal separator between menu groups
vel-menu-horizontalModifier that renders the menu as a horizontal row

Examples

Vertical menu

example.html
<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif">
  <nav class="vel-menu" style="max-width:220px;">
    <div class="vel-menu-label">Navigation</div>
    <a href="#" class="vel-menu-item vel-menu-item-active">Dashboard</a>
    <a href="#" class="vel-menu-item">Projects</a>
    <a href="#" class="vel-menu-item">Team</a>
    <div class="vel-menu-divider"></div>
    <div class="vel-menu-label">Settings</div>
    <a href="#" class="vel-menu-item">Account</a>
    <a href="#" class="vel-menu-item vel-menu-item-disabled">Billing (locked)</a>
  </nav>
</div>

Horizontal menu

example.html
<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif">
  <nav class="vel-menu vel-menu-horizontal">
    <a href="#" class="vel-menu-item vel-menu-item-active">Home</a>
    <a href="#" class="vel-menu-item">About</a>
    <a href="#" class="vel-menu-item">Features</a>
    <a href="#" class="vel-menu-item">Pricing</a>
    <a href="#" class="vel-menu-item">Contact</a>
  </nav>
</div>