Navbar

vel-src: navbar.css

Horizontal navigation bar component with brand, nav links, and end-slot. Supports glass blur, sticky, and fixed-top positioning.

Class	Properties
vel-navbar	Base navbar — flex, surface background, border-bottom, padding
vel-navbar-glass	Frosted-glass effect — backdrop-filter blur + translucent background
vel-navbar-sticky	position: sticky; top: 0; z-index stacking
vel-navbar-fixed	position: fixed; top: 0; full width
vel-navbar-brand	Brand/logo slot — bold, larger text, no underline
vel-navbar-nav	Horizontal flex list of nav links
vel-navbar-link	Individual nav link — muted color, hover highlight
vel-navbar-link-active	Active nav link — primary color, bold
vel-navbar-end	Right-side slot — margin-left: auto

Examples

Basic navbar

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;">
  <nav class="vel-navbar">
    <a class="vel-navbar-brand" href="#">VeloraCSS</a>
    <ul class="vel-navbar-nav">
      <li><a class="vel-navbar-link vel-navbar-link-active" href="#">Home</a></li>
      <li><a class="vel-navbar-link" href="#">Docs</a></li>
      <li><a class="vel-navbar-link" href="#">Components</a></li>
    </ul>
    <div class="vel-navbar-end">
      <button class="vel-btn vel-btn-primary vel-btn-sm">Get Started</button>
    </div>
  </nav>
</div>

Glass navbar

example.html

<div style="padding:24px;background:#0d1422;border-radius:12px;font-family:system-ui,sans-serif;">
  <nav class="vel-navbar vel-navbar-glass">
    <a class="vel-navbar-brand" href="#">VeloraCSS</a>
    <ul class="vel-navbar-nav">
      <li><a class="vel-navbar-link vel-navbar-link-active" href="#">Home</a></li>
      <li><a class="vel-navbar-link" href="#">Docs</a></li>
    </ul>
    <div class="vel-navbar-end">
      <button class="vel-btn vel-btn-outline-primary vel-btn-sm">Sign in</button>
    </div>
  </nav>
</div>