Eine Navbar ist ein elementares Seitenelement, welches zur Navigation auf deiner Seite meist ganz oben eingebunden wird. Bootstrap bietet hier viele Funktionen, um eine Navigation zu verwenden, die sich auf Smartphones minimiert und somit immer gut bedienbar bleibt.
Jede Webseite braucht eine Navigation. Mit Bootstrap kannst du das recht einfach umsetzen und erhälst eine Navigationsleiste, die sogar responsive ist.
Eine Navigationsleiste setzt sich zumeist aus folgenden Bestandteilen zusammen:
Jede Bootstrap-Navbar hat den gleichen Grundaufbau, der nachfolgend dargestellt ist.
Die Klassen navbar navbar-default sind obligatorisch. Die Klasse container-fluid spannt die Navigation über die gesamte Breite des Bildschirms auf (alternativ kann container verwendet werden).
Innerhalb der Bootstrap-Navigation gibt es zwei Bereiche: Seitentitel / Logo (navbar-header) und die Navigationselemente (collapse navbar-collapse).
Beispiel Standard-Navigation
Es ist üblich in einer Webseite in der Navigation oben links den Titel der Seite bzw. ein Logo einzubinden, welches mit der Startseite verlinkt ist. Dies ist benutzerfreundlich, weil Besucher deiner Seite dieses Verhalten gewöhnt sind und auch so erwarten.
Der HTML-Code für den Seitentitel sieht ziemlich komplex aus, ist aber recht einfach erklärt. Das komplett button-Element ist für die korrekte Darstellung der "Hamburger-Navigation" (Vor- und Nachteile diese Technik hier nachlesen) auf Smarthpones. Dafür muss auf das div-Element der Navigationselemente verwiesen werden, damit beim Klick auf das Hamburger-Icon die Navigation auf bzw. zu klappt. Das passiert über das Attribut data-target="#navbar".
Der eigentliche Seitentitel ist lediglich ein normaler Link mit der Klasse navbar-brand. Anstelle des Seitentitels kannst du auch einfach ein Bild img-Element einfügen, um dein Logo anzuzeigen.
Der wichtigeste Bereich einer Navigation sind natürlich die Links zu Unterseiten / Such-Formulare etc. Alle Elemente müssen innerhalb das div-Elements (<div class="collapse navbar-collapse" id="navbar">) eingefügt werden.
Menüpunkte werden als Liste (ul-Element) mit der Klasse nav navbar-nav eingefügt und erhalten unterschiedliche Klassen, je nachdem ob es sich um einfache Menüpunkte oder Dropdown-Menüs handelt.
Beispiel Navigation mit Dropdown
Die Einbindung erfolgt als Link eines normalen Listenelementes (li).
<li><a href="#">Menüpunkt</a></li>
Einen hervorgehobenen Menüpunkt wird durch die Klasse <li class="active">...</li> dargestellt.
Dropdowns eignen sich um viele Unterpunkte eines Menüs darzustellen, z. B. wenn nicht alle Menüpunkte in die Haupt-Navigation passen, weil es zu viel sind.
Die Klasse <li class="dropdown">..</li> erzeugt ein Dropdown-Menü in Bootstrap, der Link muss das Attribut data-toggle="dropdown" besitzen, damit beim Klick das Dropdown auf- bzw. zugeklappt wird. Alle anderen Angaben sind optional bzw. für Screenreader notwendig.
Die eigentlichen Unterpunkte liegen dann wiederum in einer Liste mit der Klasse <ul class="dropdown-menu">.
Um ein Trennzeichen (waagerechte Linie) einzufügen, genügt es ein leeres li-Element mit der Klasse divider einzufügen.
Folgende Elemente kannst du problemlos in deine Navigation verwenden, es müssen lediglich die passenden CSS-Klassen gesetzt werden.
| Element | CSS-Klasse Bootstrap 3 |
CSS-Klasse Bootstrap 4 |
Bemerkung | Beispiel Bootstrap 4 |
|---|---|---|---|---|
| Markenname | .navbar-brand.navbar-brand | Funktioniert am besten bei einem Link, aber auch bei Bildern. |
<nav class="navbar navbar-light bg-faded"> |
|
| Navigation | .nav .navbar-nav | Kann bei einer Liste (<ul>) oder normalen Links (nur ab Bootstrap 4!) verwendet werden. |
<nav class="navbar navbar-light bg-faded"> |
|
| Formulare | .navbar-form .navbar-left/right |
.form-linline .float-xs-left/right |
Alle Formularelemente können einfach genutzt werden, ebenso wie Input Groups und Buttons in verschiedenen Größen. |
<nav class="navbar navbar-light bg-faded"> |
| Text | .navbar-text .navbar-left/right |
.navbar-text .float-xs-left/right |
Texte können ebenfalls einfach links oder rechts in der Navbar positioniert werden. |
<nav class="navbar navbar-light bg-faded"> |
Beispiel Navigationselemente
In Bootstrap 3 gibt es leider nur zwei Varianten:
.navbar-inverse anhängen) um eine dunkle Navbar zu erhalten.Bootstrap 4 bietet mehr Möglichkeiten neben hell/dunkel (.navbar-light und .navbar-dark) kann man auch eine Hintergrundfarbe angeben oder einfach die Primärfarbe (.bg-primary).
Bitte schaue dir einfach die Beispiele an.
Beispiel Farbige Navigation
Bootstrap bringt einige Klassen mit, die zur Positionierung der Navbar innerhalb der Webseite nützlich sind.
| Position | CSS-Klasse Bootstrap 3 | CSS-Klasse Bootstrap 4 | Bemerkung | Beispiel Bootstrap 4 |
|---|---|---|---|---|
| Oben fest | .navbar-fixed-top | Navbar oben anheften. Aufpassen: Es muss ein Padding angegeben werden, damit kein Content überdeckt wird. |
<nav class="navbar navbar-fixed-top navbar-light bg-faded"> |
|
| Unten fest | .navbar-fixed-bottom | Navbar unten anheften. Aufpassen: Es muss ein Padding angegeben werden, damit kein Content überdeckt wird. |
<nav class="navbar navbar-fixed-bottom navbar-light bg-faded"> |
|
| Ganze Breite | .navbar-static-top | .navbar-full | Navbar über die gesamte Seitenbreite |
<nav class="navbar navbar-full navbar-light bg-faded"> |
Beispiel Positionierung der Navbar