Skip to main content
VelinStyle v0.8.0
⌂ Home
  1. Docs
  2. Components
  3. Navbar

Navbar

A responsive navigation header using .velin-nav. Includes brand, links, mobile toggle, and mega-menu support.

Basic navbar

<nav class="velin-nav">
  <a href="#" class="velin-nav-brand">Brand</a>
  <ul class="velin-nav-links">
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Pricing</a></li>
  </ul>
</nav>

Brand

Include an image, text, or both in the .velin-nav-brand element.

<a href="/" class="velin-nav-brand">
  <img src="/logo.svg" alt="Logo" width="30" height="30">
  My App
</a>

Mobile toggle

Add a .velin-nav-toggle button to collapse the nav on small screens.

<nav class="velin-nav">
  <a href="/" class="velin-nav-brand">Brand</a>

  <button class="velin-nav-toggle" aria-expanded="false"
          aria-controls="navCollapse" aria-label="Toggle navigation">
    <span class="velin-nav-toggle-icon"></span>
  </button>

  <div class="velin-nav-collapse" id="navCollapse">
    <ul class="velin-nav-links">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Mega menu

Use .velin-nav-mega inside a dropdown item for a full-width panel with columns.

<nav class="velin-nav">
  <a href="/" class="velin-nav-brand">Brand</a>
  <ul class="velin-nav-links">
    <li class="velin-nav-item-mega">
      <a href="#" class="velin-nav-link">Products</a>
      <div class="velin-nav-mega">
        <div class="velin-nav-mega-col">
          <h6>Category A</h6>
          <a href="#">Product 1</a>
          <a href="#">Product 2</a>
        </div>
        <div class="velin-nav-mega-col">
          <h6>Category B</h6>
          <a href="#">Product 3</a>
          <a href="#">Product 4</a>
        </div>
      </div>
    </li>
  </ul>
</nav>

Theme wählen