Navigationsleiste 1.2.0

Responsive Site-Navigation mit .velin-nav BEM-Klassen: brand, Linkliste, mobiler Umschalter, vertikale Variante, and mega Menü. English: Navbar

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Grundlage wo entsprechend angegeben.

Wann verwenden

Primärer Site- oder App-Chrome mit Brand + Links über Breakpoints hinweg.
Bevorzuge .velin-nav__*-Klassen gegenüber Bootstrap-.navbar-Namen.
For mobile app tab bars, use Bottom navigation; for in-Seite panels, use Navs & Tabs.

Wann nicht verwenden

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 Menüs — prefer Menüleiste or Dropdown.
Skip mega Menüs when a simple Linkliste or drawer is clearer on small screens.

Einfache Navigationsleiste

<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

F?ge Bild, Text oder beides in .velin-nav__brand.

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

Mobiler Umschalter

Below 48rem, .velin-nav__list is verborgen 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>

Place .velin-nav__mega inside a .velin-nav__item. It opens on hover and :Fokus-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-Klassen

Class	Rolle
`.velin-nav`	Horizontale Nav-Hülle
`.velin-nav__brand`	Brand- / Home-Link
`.velin-nav__list`	Linkliste; open with `data-velin-open` on small screens
`.velin-nav__link`	Nav Link; aktuell via `aria-aktuell="Seite"` or `.velin-nav__link--active`
`.velin-nav__toggle`	Mobiler MenüButton
`.velin-nav--vertical`	Stacked / sidebar variant
`.velin-nav__mega` / `__mega-section` / `__mega-title`	Mega-Panel

Use a landmark <nav> with an accessible name (aria-label).
Mark the aktuell Seite with aria-aktuell="Seite" 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.