Das Bootstrap 5 Hamburger-Menü ist ein Menü, das in einer mobilen Ansicht angezeigt (also bei kleinen Displays wie beim Smartphone) wird und das Navigationsmenü in einem Dropdown-Menü anzeigt, wenn es aktiviert wird. Es wird normalerweise durch ein Symbol mit drei horizontalen Linien dargestellt, das als "Hamburger-Menü" bekannt ist.
In diesem Beispiel wird die Navbar-Klasse von Bootstrap verwendet, um eine Navigationsleiste zu erstellen. Der Navbar-Brand ist der Name oder das Logo Ihrer Website, das in der Navigationsleiste angezeigt wird. Der Navbar-Toggler ist der Button, der das Hamburger-Menü aufruft, wenn der Benutzer darauf klickt. Der Navbar-Nav enthält die einzelnen Navigationslinks, die im Dropdown-Menü angezeigt werden, wenn das Hamburger-Menü aktiviert ist.
In diesem Beispiel haben wir drei Navigationslinks hinzugefügt:
- Startseite
- Über uns
- Kontakt
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Mein Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Startseite</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Über uns</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>