Navigation

Alle Varianten nutzen dieselbe <details>/<summary>- Mechanik für Untermenüs (Klick/Tastatur, kein Hover-Problem) - siehe components/nav.css.

<nav class="ncss-nav">
  <ul class="ncss-nav-list">
    <li class="ncss-nav-item"><a href="/" aria-current="page">Start</a></li>
    <li class="ncss-nav-item">
      <details class="ncss-nav-dropdown">
        <summary>Mehr</summary>
        <ul class="ncss-nav-submenu">
          <li><a href="/a">Punkt A</a></li>
        </ul>
      </details>
    </li>
  </ul>
</nav>

Verschachtelte Dropdowns (2 Ebenen)

Ein .ncss-nav-dropdown innerhalb eines .ncss-nav-submenu - beliebig tief möglich.

Mega-Menü

Gleiche .ncss-nav-submenu-Klasse, zusätzlich --mega: mehrspaltiges Grid statt einfacher Liste.

Fenster schmaler ziehen - unterhalb 64rem wird die Mega-Spalten-Ansicht automatisch zu einer gestapelten Liste (dieselbe nav-collapse-Konvention wie beim normalen Dropdown).

Tree-Navigation (Sidebar-Variante)

Kein Kollabieren nötig, beliebig tief verschachtelbar - typisch für Docs-Sidebars.

Off-Canvas (mobile Kollaps)

Der Menü-Button oben rechts in der Topbar (Fenster schmaler als 64rem ziehen, oder direkt am Handy) öffnet dasselbe Panel als Off-Canvas-Sidebar - eine Nav-Struktur, zwei Darstellungen, siehe components/nav.css.

Viele Punkte: Priority-Navigation (Opt-in, JS)

<ncss-nav-priority> (Custom Element, components/nav-priority.css + js/nav-priority.js) verschiebt Punkte, die nicht mehr in eine Zeile passen, automatisch per ResizeObserver in ein "Mehr"-Dropdown - funktioniert für jede Punktzahl, kein fester Breakpoint im Code. Ohne JS reiner Passthrough (normales flex-wrap).

<ncss-nav-priority>
  <ul class="ncss-nav-list">
    <li class="ncss-nav-item"><a href="/">Start</a></li>
    <li class="ncss-nav-item"><a href="/a">Punkt A</a></li>
    ... (beliebig viele weitere)
  </ul>
</ncss-nav-priority>

Live - Regler ziehen, um den Rahmen schmaler/breiter zu machen (ein <iframe> spannt seinen EIGENEN Viewport auf, deshalb per Regler statt das ganze Browserfenster verkleinern zu müssen). Läuft bei JEDER Breite ohne Umschalten auf einen ☰-Button - "Mehr" wächst weiter, je schmaler der Rahmen wird:

Viele Punkte: Horizontal scrollbar (reines CSS)

.ncss-nav--scroll für viele KURZE Punkte (Tags, Kategorie-Pills) - zeigt alle gleichzeitig, keiner versteckt sich, dafür scrollt die Zeile. Randloser Fade-Verlauf, scroll-snap, kein JS.

<nav class="ncss-nav ncss-nav--scroll">
  <ul class="ncss-nav-list">
    <li class="ncss-nav-item"><a href="#tag1">Tag Eins</a></li>
    ...
  </ul>
</nav>

Slide-Drilldown für mobile Untermenüs (Opt-in, JS)

<ncss-nav-drilldown> (components/nav-drilldown.css + js/nav-drilldown.js) - statt inline aufzuklappen, schiebt sich beim Antippen eines Elternpunkts das GANZE Panel auf die Kindpunkte um (wie iOS-Einstellungen), mit einem "Zurück"-Punkt oben. Nur mobil relevant, IDENTISCHES Markup wie der normale verschachtelte Dropdown - ohne JS klappt es normal inline auf. Ein Elternpunkt bleibt zusätzlich als eigene Seite aufrufbar, wenn <summary> einen echten <a> enthält (siehe "Produkte" unten) - ein Klick auf den Linktext navigiert, ein Klick auf den Chevron drillt rein.

<ncss-nav-drilldown>
  <ul class="ncss-nav-list">
    <li class="ncss-nav-item">
      <details class="ncss-nav-dropdown">
        <summary><a href="/produkte">Produkte</a></summary>
        <ul class="ncss-nav-submenu">
          <li><a href="/produkte/a">Produkt A</a></li>
        </ul>
      </details>
    </li>
  </ul>
</ncss-nav-drilldown>

Live - immer im mobilen Off-Canvas-Modus (eigener, schmaler <iframe>-Viewport): ☰ antippen, dann "Produkte" antippen.

Breadcrumb

Vergleich: <wa-breadcrumb> - hier die native Variante (<nav><ol>), kein Web Awesome nötig.

Leiste beim Scrollen aus-/einblenden

Rein native CSS Scroll-State-Container-Query (@container scroll-state(scrolled: block-end)), kein JS, kein Scroll-Event-Listener. Auf DIESER Seite (echtes Seiten-Scroll) runter- scrollen - die Leiste unten blendet aus; wieder hochscrollen, sie kommt zurück. Noch nicht in jedem Browser unterstützt (@supports-Gate) - ohne Unterstützung bleibt sie einfach dauerhaft sichtbar, kein kaputtes Verhalten.