1. Docs
2. Components
3. Navigation
4. Navbar

Navbar 1.2.2

Responsive site navigation with .velin-nav BEM classes: brand, link list, mobile toggle, vertical variant, and mega menu. Deutsch: Navigationsleiste

When to use

• Primary site or app chrome with brand + links across breakpoints.
• Prefer .velin-nav__* classes over Bootstrap .navbar names.
• For mobile app tab bars, use Bottom navigation; for in-page panels, use Navs & Tabs.

When not

• Do not invent legacy class names such as .velin-nav-brand — the CSS API uses BEM (.velin-nav__brand).
• Do not use a navbar for exclusive action menus — prefer Menubar or Dropdown.
• Skip mega menus when a simple link list or drawer is clearer on small screens.

Basic navbar

<nav class="velin-nav" aria-label="Main">
  <a href="/" class="velin-nav__brand">Brand</a>
  <ul class="velin-nav__list">
    <li><a href="/" class="velin-nav__link" aria-current="page">Home</a></li>
    <li><a href="/features" class="velin-nav__link">Features</a></li>
    <li><a href="/pricing" class="velin-nav__link">Pricing</a></li>
  </ul>
</nav>

Brand

Include an image, text, or both in .velin-nav__brand.

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

Mobile toggle

Below 48rem, .velin-nav__list is hidden until it has data-velin-open. Wire a .velin-nav__toggle button (optional data-velin-nav-toggle) to toggle that attribute and keep aria-expanded in sync.

<nav class="velin-nav" aria-label="Main">
  <a href="/" class="velin-nav__brand">Brand</a>
  <button type="button" class="velin-nav__toggle" data-velin-nav-toggle
          aria-expanded="false" aria-controls="mainNavList" aria-label="Toggle menu">
  </button>
  <ul class="velin-nav__list" id="mainNavList">
    <li><a href="/" class="velin-nav__link">Home</a></li>
    <li><a href="/about" class="velin-nav__link">About</a></li>
  </ul>
</nav>

Mega menu

Place .velin-nav__mega inside a .velin-nav__item. It opens on hover and :focus-within.

<nav class="velin-nav" aria-label="Main">
  <a href="/" class="velin-nav__brand">Brand</a>
  <ul class="velin-nav__list">
    <li class="velin-nav__item" style="position:relative">
      <a href="#" class="velin-nav__link">Products</a>
      <div class="velin-nav__mega">
        <div class="velin-nav__mega-section">
          <p class="velin-nav__mega-title">Category A</p>
          <a href="#" class="velin-nav__link">Product 1</a>
          <a href="#" class="velin-nav__link">Product 2</a>
        </div>
        <div class="velin-nav__mega-section">
          <p class="velin-nav__mega-title">Category B</p>
          <a href="#" class="velin-nav__link">Product 3</a>
        </div>
      </div>
    </li>
  </ul>
</nav>

CSS classes

Accessibility

• Use a landmark <nav> with an accessible name (aria-label).
• Mark the current page with aria-current="page" on the active link.
• Toggle buttons need aria-expanded and preferably aria-controls pointing at the list id.
• Links keep a 2.75rem minimum block size for touch targets.

Related

• Navs & Tabs
• Bottom navigation
• Menubar
• Drawer
• Responsive layout