Komponenten / Navigation
Navigation in FWT
Navigation ist mehr als ein Menü oben auf der Seite. Gute Navigation hilft
Nutzern, sich zu orientieren, Bereiche zu wechseln, Inhalte zu finden und
auf kleinen Bildschirmen handlungsfähig zu bleiben.
FWT bietet deshalb Top-Navigation, Tabs, Breadcrumbs, Side-Navs,
Kontextnavigation, Bottom-Navigation und vorbereitete ein-/ausblendbare
Navigationsbereiche.
Wichtig: Navigation muss klar zeigen, wo der Nutzer ist und wohin er gehen kann.
Top-Nav
Top-Navigation
Die Top-Navigation eignet sich für klassische Webseiten, Doku-Seiten,
Tools und öffentliche Bereiche.
HTML-Code anzeigen
<nav class="fwt-topnav fwt-nav" aria-label="Hauptnavigation">
<div class="fwt-topnav-inner">
<a class="fwt-topnav-brand" href="#">
<span class="fwt-topnav-logo" aria-hidden="true">F</span>
<span class="fwt-topnav-title">
<strong>FWT</strong>
<span>Freie Webtools</span>
</span>
</a>
<ul class="fwt-topnav-menu">
<li><a class="fwt-nav-link is-active" href="#" aria-current="page">Start</a></li>
<li><a class="fwt-nav-link" href="#">Inhalt</a></li>
<li><a class="fwt-nav-link" href="#">Formulare</a></li>
<li><a class="fwt-nav-link" href="#">Komponenten</a></li>
</ul>
<div class="fwt-topnav-actions">
<a class="fwt-btn fwt-btn-secondary" href="#">Doku</a>
<a class="fwt-btn fwt-btn-primary" href="#">Download</a>
</div>
</div>
</nav>
Links
Navigationslinks mit aktivem Zustand
Navigationslinks brauchen erkennbare Zustände. Der aktive Bereich sollte
klar sichtbar sein.
HTML-Code anzeigen
<nav class="fwt-nav" aria-label="Beispielnavigation">
<div class="fwt-btn-toolbar">
<a class="fwt-nav-link is-active" href="#" aria-current="page">
<span class="fwt-nav-icon" aria-hidden="true">1</span>
Übersicht
</a>
<a class="fwt-nav-link" href="#">
<span class="fwt-nav-icon" aria-hidden="true">2</span>
Inhalte
</a>
<a class="fwt-nav-link fwt-nav-link-muted" href="#">
<span class="fwt-nav-icon" aria-hidden="true">?</span>
Hilfe
</a>
<a class="fwt-nav-link fwt-nav-link-danger" href="#">
<span class="fwt-nav-icon" aria-hidden="true">!</span>
Kritisch
</a>
</div>
</nav>
Tabs / Pills
Tab- und Pill-Navigation
Tabs und Pills eignen sich für Unterbereiche, Filter, Ansichten oder
kleinere Bereichswechsel.
HTML-Code anzeigen
<nav aria-label="Bereichsnavigation">
<ul class="fwt-tabnav">
<li><a class="fwt-tabnav-link is-active" href="#" aria-current="page">Übersicht</a></li>
<li><a class="fwt-tabnav-link" href="#">Details</a></li>
<li><a class="fwt-tabnav-link" href="#">Einstellungen</a></li>
<li><a class="fwt-tabnav-link" href="#">Protokoll</a></li>
</ul>
</nav>
<nav aria-label="Pill-Navigation">
<ul class="fwt-pillnav">
<li><a class="fwt-pillnav-link is-active" href="#" aria-current="page">Alle</a></li>
<li><a class="fwt-pillnav-link" href="#">Aktiv</a></li>
<li><a class="fwt-pillnav-link" href="#">Entwurf</a></li>
<li><a class="fwt-pillnav-link" href="#">Archiv</a></li>
</ul>
</nav>
Breadcrumb
Breadcrumb-Navigation
Breadcrumbs zeigen, wo sich Nutzer innerhalb einer Struktur befinden.
HTML-Code anzeigen
<nav aria-label="Breadcrumb">
<ol class="fwt-breadcrumb">
<li><a href="#">FWT</a></li>
<li><a href="#">Komponenten</a></li>
<li><span aria-current="page">Navigation</span></li>
</ol>
</nav>
Side-Navs
Linke und rechte Navigation
Linke Navigation eignet sich für Hauptbereiche. Rechte Navigation eignet
sich für Kontext, Inhaltsverzeichnisse oder Zusatzaktionen.
HTML-Code anzeigen
<div class="fwt-card-grid fwt-card-grid-2">
<aside class="fwt-sidenav">
<div class="fwt-sidenav-header">
<h3 class="fwt-sidenav-title">Linke Navigation</h3>
<p class="fwt-sidenav-text">Für Hauptbereiche, Doku oder Adminseiten.</p>
</div>
<nav aria-label="Linke Beispielnavigation">
<ul class="fwt-sidenav-list">
<li><a class="fwt-sidenav-link is-active" href="#" aria-current="page">Dashboard</a></li>
<li><a class="fwt-sidenav-link" href="#">Inhalte</a></li>
<li><a class="fwt-sidenav-link" href="#">Formulare</a></li>
<li><a class="fwt-sidenav-link" href="#">Komponenten</a></li>
</ul>
</nav>
</aside>
<aside class="fwt-contextnav">
<h3 class="fwt-contextnav-title">Rechte Kontextnavigation</h3>
<nav aria-label="Kontextnavigation">
<ul class="fwt-contextnav-list">
<li><a class="fwt-contextnav-link is-active" href="#" aria-current="location">Überblick</a></li>
<li><a class="fwt-contextnav-link" href="#">Beispiele</a></li>
<li><a class="fwt-contextnav-link" href="#">Hinweise</a></li>
<li><a class="fwt-contextnav-link" href="#">Barrierefreiheit</a></li>
</ul>
</nav>
</aside>
</div>
Nav-Shell
Layout mit linker und rechter Navigation
Die Nav-Shell ist für Doku-, Admin- und Tool-Oberflächen gedacht. Links
steht die Hauptnavigation, rechts Kontext oder Inhaltsverzeichnis.
Live-Beispiel mit Toggle
Inhaltsbereich
In der Mitte steht der eigentliche Inhalt. Links kann eine Hauptnavigation
liegen, rechts eine Kontextnavigation oder ein Inhaltsverzeichnis.
Linke Nav
Rechte Nav
HTML-Code anzeigen
<div class="fwt-nav-shell">
<aside
id="demo-left-nav"
class="fwt-nav-shell-left fwt-nav-panel fwt-nav-panel-left"
data-fwt-nav-panel="left"
>
<div class="fwt-sidenav">
<div class="fwt-sidenav-header">
<h3 class="fwt-sidenav-title">Hauptnavigation</h3>
<p class="fwt-sidenav-text">Linker Bereich für Hauptpunkte.</p>
</div>
<nav aria-label="Demo-Hauptnavigation">
<ul class="fwt-sidenav-list">
<li><a class="fwt-sidenav-link is-active" href="#" aria-current="page">Übersicht</a></li>
<li><a class="fwt-sidenav-link" href="#">Dokumentation</a></li>
<li><a class="fwt-sidenav-link" href="#">Formulare</a></li>
<li><a class="fwt-sidenav-link" href="#">Komponenten</a></li>
</ul>
</nav>
</div>
</aside>
<main class="fwt-nav-shell-main">
<article class="fwt-card fwt-card-elevated">
<h3 class="fwt-card-title">Inhaltsbereich</h3>
<p class="fwt-card-text">
In der Mitte steht der eigentliche Inhalt. Links kann eine Hauptnavigation
liegen, rechts eine Kontextnavigation oder ein Inhaltsverzeichnis.
</p>
<div class="fwt-btn-toolbar">
<button
class="fwt-nav-toggle"
type="button"
data-fwt-nav-toggle="left"
data-fwt-nav-target="#demo-left-nav"
>
Linke Nav
</button>
<button
class="fwt-nav-toggle"
type="button"
data-fwt-nav-toggle="right"
data-fwt-nav-target="#demo-right-nav"
>
Rechte Nav
</button>
</div>
</article>
</main>
<aside
id="demo-right-nav"
class="fwt-nav-shell-right fwt-nav-panel fwt-nav-panel-right"
data-fwt-nav-panel="right"
>
<div class="fwt-contextnav">
<h3 class="fwt-contextnav-title">Auf dieser Seite</h3>
<nav aria-label="Demo-Kontextnavigation">
<ul class="fwt-contextnav-list">
<li><a class="fwt-contextnav-link is-active" href="#" aria-current="location">Einführung</a></li>
<li><a class="fwt-contextnav-link" href="#">Beispiele</a></li>
<li><a class="fwt-contextnav-link" href="#">Code</a></li>
<li><a class="fwt-contextnav-link" href="#">Prüfung</a></li>
</ul>
</nav>
</div>
</aside>
</div>
Die Buttons blenden linke und rechte Navigation ein oder aus. Dafür muss
fwt-navigation.js eingebunden sein.
Bottom-Nav
Bottom-Navigation / mobile Schnellnavigation
Eine Bottom-Navigation ist besonders für mobile oder appähnliche Oberflächen
nützlich. Sie kann wichtige Bereiche oder Einblendfunktionen anbieten.
HTML-Code anzeigen
<nav class="fwt-bottomnav" aria-label="Mobile Schnellnavigation">
<ul class="fwt-bottomnav-list">
<li>
<a class="fwt-bottomnav-link is-active" href="#" aria-current="page">
<span class="fwt-bottomnav-icon" aria-hidden="true">⌂</span>
Start
</a>
</li>
<li>
<button class="fwt-bottomnav-button" type="button">
<span class="fwt-bottomnav-icon" aria-hidden="true">☰</span>
Menü
</button>
</li>
<li>
<button class="fwt-bottomnav-button" type="button">
<span class="fwt-bottomnav-icon" aria-hidden="true">#</span>
Inhalt
</button>
</li>
<li>
<a class="fwt-bottomnav-link" href="#">
<span class="fwt-bottomnav-icon" aria-hidden="true">?</span>
Hilfe
</a>
</li>
</ul>
</nav>
Doku / Admin
Doku- und Admin-Navigation
Für Dokumentationen und Adminbereiche braucht es gruppierte Navigationen
mit klaren Abschnittsüberschriften.
HTML-Code anzeigen
<div class="fwt-sidenav">
<div class="fwt-sidenav-header">
<h3 class="fwt-sidenav-title">FWT-Doku</h3>
<p class="fwt-sidenav-text">Beispiel für eine Doku-/Admin-Navigation.</p>
</div>
<nav class="fwt-docnav" aria-label="Dokumentationsnavigation">
<div class="fwt-docnav-group">
<p class="fwt-docnav-group-title">Grundlagen</p>
<ul class="fwt-docnav-list">
<li><a class="fwt-docnav-link" href="#">Farben</a></li>
<li><a class="fwt-docnav-link" href="#">Typografie</a></li>
<li><a class="fwt-docnav-link" href="#">Layout</a></li>
</ul>
</div>
<div class="fwt-docnav-group">
<p class="fwt-docnav-group-title">Komponenten</p>
<ul class="fwt-docnav-list">
<li><a class="fwt-docnav-link" href="#">Buttons</a></li>
<li><a class="fwt-docnav-link" href="#">Cards</a></li>
<li><a class="fwt-docnav-link is-active" href="#" aria-current="page">Navigation</a></li>
</ul>
</div>
</nav>
</div>
Dark
Dunkle Navigation
Die dunkle Variante eignet sich für hochwertige Header, Toolbereiche oder
appähnliche Oberflächen.
HTML-Code anzeigen
<nav class="fwt-topnav fwt-nav fwt-nav-dark" aria-label="Dunkle Hauptnavigation">
<div class="fwt-topnav-inner">
<a class="fwt-topnav-brand" href="#">
<span class="fwt-topnav-logo" aria-hidden="true">F</span>
<span class="fwt-topnav-title">
<strong>FWT Dark</strong>
<span>Navigation</span>
</span>
</a>
<ul class="fwt-topnav-menu">
<li><a class="fwt-nav-link is-active" href="#" aria-current="page">Start</a></li>
<li><a class="fwt-nav-link" href="#">Tools</a></li>
<li><a class="fwt-nav-link" href="#">Doku</a></li>
<li><a class="fwt-nav-link" href="#">Kontakt</a></li>
</ul>
</div>
</nav>
Barrierefreiheit
Navigation richtig verwenden
Nav mit Label
Jede größere Navigation sollte ein verständliches Label haben.
<nav aria-label="Hauptnavigation">...</nav>
Kopieren
Aktive Seite markieren
Die aktive Seite sollte mit aria-current gekennzeichnet werden.
aria-current="page"
Kopieren
Tastatur-Fokus sichtbar
Links und Toggle-Buttons müssen mit Tastatur gut erkennbar sein.
:focus-visible
Kopieren
Toggle-Zustand setzen
Einblendbare Navigation sollte aria-expanded aktualisieren.
aria-expanded="true"
Kopieren
Nicht zu viele Ebenen
Zu tiefe Navigationen werden schnell unübersichtlich.
maximal klar strukturieren
Kopieren
Mobile Bedienung beachten
Auf kleinen Bildschirmen braucht Navigation andere Muster.
Bottom-Nav / Side-Nav Toggle
Kopieren