Bootstrap5 Navigationsleiste

Die Navigationsleiste wird normalerweise oben auf der Seite platziert.

Wir können die.navbarKlasse verwenden, um eine Standard-Navigationsleiste zu erstellen, gefolgt von:.navbar-expand-xxl|xl|lg|md|smKlasse, um eine responsive Navigationsleiste zu erstellen (horizontal auf großen Bildschirmen, vertikal gestapelt auf kleinen Bildschirmen).

Optionen in der Navigationsleiste können das<ul>-Element verwenden und dieclass="navbar-nav"Klasse hinzufügen.<li>Dann.nav-itemauf dem Element hinzufügen<a>auf dem Element verwenden.nav-linkKlasse:

Beispiel

<!--Auf kleinen Bildschirmen wechselt die horizontale Navigationsleiste zu vertikal.--> <nav Klasse="navbar navbar-expand-sm bg-light"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav>

Selbst ausprobieren »

Vertikale Navigationsleiste

Durch Entfernen.navbar-expand-xxl|xl|lg|md|smKlasse, können Sie eine vertikale Navigationsleiste erstellen:

Beispiel

<!--Vertikale Navigationsleiste--> <nav class="navbar bg-light"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav>

Selbst ausprobieren »

Zentrierte Navigationsleiste

Durch Hinzufügen.justify-content-centerKlasse, können Sie eine zentrierte Navigationsleiste erstellen:

Beispiel

<nav class="navbar navbar-expand-sm bg-light justify-content-center"> ... </nav>

Selbst ausprobieren »

Navigationsleiste mit verschiedenen Farben

Sie können die folgenden Klassen verwenden, um Navigationsleisten mit verschiedenen Farben zu erstellen:.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkund.bg-light).

Tipp:Für dunkle Hintergründe müssen Sie bei.navbar-darkdie Textfarbe auf hell setzen; für helle Hintergründe müssen Sie bei.navbar-lightdie Textfarbe auf dunkel setzen.

Beispiel

<!--Grauer Hintergrund mit schwarzem Text--> <nav class="navbar navbar-expand-sm bg-light navbar-light"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Aktiv</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Deaktiviert</a> </li> </ul> </nav> <!--Schwarzer Hintergrund mit weißem Text--> <nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav> <!--Blauer Hintergrund mit weißem Text--> <nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

Selbst ausprobieren »

Aktive und deaktivierte Zustände: Du kannst<a>dem Element die.active-Klasse hinzufügen, um die ausgewählte Option hervorzuheben..disabledKlasse wird verwendet, um den Link nicht anklickbar zu machen.

Marke/Logo

.navbar-brand-Klasse wird verwendet, um die Marke/das Logo hervorzuheben:

Beispiel

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Logo</a> ... </nav>

Selbst ausprobieren »

Sie können die.navbar-brand-Klasse verwenden, um das Bild in der Navbar responsiv zu machen.

Beispiel

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#"> <img src="bird.jpg" alt="Logo" style="width:40px;"> </a> ... </nav>

Selbst ausprobieren »

Einklappbare Navbar

Normalerweise klappen wir auf kleinen Bildschirmen die Navbar ein und zeigen die Navigationsoptionen per Klick an.

Um eine einklappbare Navbar zu erstellen, können Sie am Buttonclass="navbar-toggler", data-bs-toggle="collapse" und data-target="#thetarget"class. Dann auf demclass="collapse navbar-collapse"div mit der Klasse, umschließen Sie den Navigationsinhalt (Links). Die id am div-Element stimmt mit derdata-target-id überein, die am Button angegeben ist:

Beispiel

<nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Marke --> <a class="navbar-brand" href="#">Navbar</a> <!-- Toggler/einklappbarer Button --> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar-Links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </nav>

Selbst ausprobieren »

Navbar mit Dropdown-Menü

Sie können ein Dropdown-Menü in der Navbar festlegen:

Beispiel

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Marke --> <a class="navbar-brand" href="#">Logo</a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown"> Dropdown-Link </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> </ul> </nav>

Selbst ausprobieren »

Formulare und Buttons in der Navbar

Navbar-Formulare<form>-Element verwendet dieclass="form-inline"-Klasse, um Eingabefelder und Buttons anzuordnen:

Beispiel

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline"> <input class="form-control" type="text" placeholder="Suchen"> <button class="btn btn-success" type="submit">Suchen</button> </form> </nav>

Selbst ausprobieren »

Sie können auch andere Eingabeklassen verwenden, wie zum Beispiel die.input-group-addon-Klasse, die verwendet wird, um ein kleines Label vor dem Eingabefeld hinzuzufügen.

Beispiel

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline" action="/action_page.php"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Benutzername"> </div> </form> </nav>

Selbst ausprobieren »

Navbar-Text

Verwenden Sie.navbar-text. Die Klasse zum Festlegen von Nicht-Link-Text auf der Navbar sorgt für horizontale Ausrichtung, mit derselben Farbe und demselben Padding.

Beispiel

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> </ul> <!-- Navbar-Text--> <span class="navbar-text"> Navbar-Text </span> </nav>

Selbst ausprobieren »

Fixierte Navbar

Die Navigationsleiste kann oben oder unten fixiert werden.

Wir verwenden.fixed-topKlasse, um die Navigationsleiste zu fixieren:

Beispiel

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>

Selbst ausprobieren »

.fixed-bottomDie Klasse wird verwendet, um die Navigationsleiste am unteren Rand zu fixieren:

Beispiel

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav>

Selbst ausprobieren »

Navbar-Beispiel

Beispiel


Selbst ausprobieren »
Weitere Erweiterungen