Navbar in Bootstrap - Eine Anleitung ☼ BootstrapWorld.de

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.

Eine Standard-Navbar
Unterstützte Elemente
Farbige Navbar
Positionierung

Eine Standard-Navbar

Jede Webseite braucht eine Navigation. Mit Bootstrap kannst du das recht einfach umsetzen und erhälst eine Navigationsleiste, die sogar responsive ist.

Beispiel Standard-Navigation

Eine Navigationsleiste setzt sich zumeist aus folgenden Bestandteilen zusammen:

Seitentitel oder Logo
Hauptmenü
Suchfunktion
weitere Links zu Impressum etc.

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).

Seitentitel / Logo

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.

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
   <span class="sr-only">Navigation ein-/ausblenden</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Seitentitel</a>

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.

Navigationselemente

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.

Menupunkte 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.

<ul class="nav navbar-nav">
<li><a href="#">Menüpunkt</a></li>
<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Unterpunkt 1</a></li>
        <li><a href="#">Unterpunkt 2</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Unterpunkt 3</a></li>
      </ul>
</li>
</ul>

Beispiel Navigation mit Dropdown

Normaler Menüpunkt

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.

Dropdown-Menüpunkt

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.

Unterstützte Elemente

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"> <a class="navbar-brand" href="#">Marke</a> </nav>`
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"> <div class="nav navbar-nav"> <a class="nav-item nav-link active" href="#">Start</a> <a class="nav-item nav-link" href="#">Seite 1</a> </div> </nav>`
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"> <form class="form-inline float-xs-left"> <button class="btn btn-outline-success" type="button">Gro&slzlig;er Button</button> <button class="btn btn-sm align-middle btn-outline-secondary" type="button">Kleiner button</button> </form> </nav>`
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"> <span class="navbar-text float-xs-right text-muted"> Text in der Navbar, der rechtsbündig ist. </span> </nav>`

Beispiel Navigation Elemente

Farbige Navbar

In Bootstrap 3 gibt es leider nur zwei Varianten:

die Standard-Navbar (in weiß)
oder die schwarze Navbar(Klasse .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 Navbar

Positionierung

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"> <a class="navbar-brand" href="#">Oben fixiert</a> </nav>`
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"> <a class="navbar-brand" href="#">Unten fixiert</a> </nav>`
Ganze Breite	.navbar-static-top	.navbar-full	Navbar über die gesamte Seitenbreite	`<nav class="navbar navbar-full navbar-light bg-faded"> <a class="navbar-brand" href="#">Full width</a> </nav>`

Beispiel Positionierung der Navbar