Navbar in Bootstrap - Eine Anleitung

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.

<nav class="navbar navbar-default">
  <div class="container-fluid">

    <div class="navbar-header">
      ...
    </div>

    <div class="collapse navbar-collapse" id="navbar">
      ...
    </div>

  </div>
</nav>

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

Hast du eine Frage zu dieser Seite?
Fragen anderer Besucher zum Thema "Navbar in Bootstrap - Eine Anleitung..."

York fragt

Mein Bootstrapmenu (im Smartphone Modus) scrollt bei klick runter. Schliesst sich jedoch nicht wieder nachdem ich einen Punkt angewählt habe. Das ist denkbar schlecht, da so nur ein kleiner Zwischenraum mit Inhalten auf dem Handy zu sehen ist und fast das ganze Display von Menuepunkten verdeckt ist.

Was kann ich tun , um das zu korrigieren?
Am Besten wäre es schliesst sich , wenn man einen Menüpunkt anwählt oder wenn man oben auf die Menuerasterung klickt...

Danke für eure Hilfe

Antwort von BootstrapWorld.de

Hallo,

probiere mal bitte folgendes. Ändere die Links in deinem Menü und füge die Attribute "data-toggle" und "data-target" mit ein. Wichtigt ist, dass dein Menü die Klasse "nav-collapse" besitzt

<li>
  <a data-toggle="collapse" data-target=".nav-collapse" href="#about">About</a>
</li>

Viele Grüße

Andreas

Gefunden auf:
https://stackoverflow.com/questions/16680543/hide-twitter-bootstrap-nav-collapse-on-click#answer-24685804

Andreas G√ľnther fragt

Ich habe bootstrap-3.5.5 und möchte die Hintergrundfarbe der Dropdown-Menues und das Highlighting vom Grau in andere Farben ändern. An welcher Stelle in der bootstrap-theme.css wird das gemacht? Ich vermute mal ab Zeile 317 ".dropdown-menu" mit dem Attribut "background-image". Leider stelle ich nach Änderung der Farbwerte im Linear-Gradienten keine Farbänderung auf der Webseite fest.
Gäbe es auch Online einen Generator für linear-gradient()?
Besten Dank
Andreas

Antwort von BootstrapWorld.de

Hallo Andreas,

schau mal, was ich hier gefunden habe: https://stackoverflow.com/a/39535443.

Ansonsten kannst du dir auch direkt bei getbootstrap.com eine benutzerdefinierte CSS-Datei erstellen lassen.

Nutze dafür einfach folgenden Generator: http://getbootstrap.com/customize/#less-variables.

Einen CSS Gradient Generator findest du z. B. hier: http://www.colorzilla.com/gradient-editor/.

Ich hoffe das hilft dir weiter.

Viele Grüße

Andreas

Ulli Stiller fragt

Ich bin vielleicht bescheuert, aber ich suche schon die ganze Zeit im Netz nach der Lösung.
Ich kann problemlos die navbar erstellen, aber wie schaffe ich es, dass der Benutzer beim Klicken auf den Link an die richtige Stelle auf meiner Seite kommt, wenn alle Elemente in Reihen untereinander und nicht wie früher in einzelnen html Seiten angelegt sind. Irgendwie müsste man einen Anker an der Stelle setzen, aber wie?

Antwort von BootstrapWorld.de

Hallo Ulli,

mit den Ankern liegst du schon mal gar nicht so schlecht ;-).

Früher wurde das Ziel eines Ankers mittels <a name="anker"></a> festgelegt.

Inzwischen kannst du als Anker die ID eines beliebigen Elements nutzen.

Ein Beispiel für die Navigation habe ich dir hier erstellt:
https://www.bootstrapworld.de/snippet/navbar-onepage

Viele Grüße

Andreas

Nach oben
BootstrapWorld.de nutzt Cookies, um euch die bestmögliche Funktionalität zu bieten.
Details ansehen
OK