Bootstrap Navbar
A navbar is the navigation bar at the top of a website, and Bootstrap's version works on both phones and laptops.
A Simple Navbar
A navbar needs the classes navbar and navbar-expand-*. The breakpoint in navbar-expand-lg says from which width the links are shown in a row.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand fw-bold" href="#">Karachi Coders</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainMenu" aria-controls="mainMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainMenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Courses</a></li>
<li class="nav-item"><a class="nav-link" href="#">Tutorials</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container py-4">
<p>Make the result window narrow. The links hide behind the menu button. Click it to open them.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>The Navbar Explained
| Part | Class or attribute | Job |
|---|---|---|
| Bar | navbar navbar-expand-lg | The navbar; shows links in a row from 992px |
| Brand | navbar-brand | Your logo or site name |
| Menu button | navbar-toggler | The "hamburger" button on small screens |
| Button target | data-bs-target="#mainMenu" | Which part the button opens and closes |
| Collapsing area | collapse navbar-collapse | Hidden on small screens until the button is clicked |
| Link list | navbar-nav | The list of links |
| Link | nav-link | One link; active marks the current page |
| Push right | ms-auto | Moves the links to the right side |
The id on the collapsing <div> must match the data-bs-target on the button. The opening and closing is done by Bootstrap's JavaScript, so the bundle script is required.
Add aria-current="page" to the active link and keep the aria-label on the menu button. Screen readers use them to tell blind users where they are.
Colours
Bootstrap 5.3 uses data-bs-theme to switch a navbar between light and dark text. Combine it with a background class:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dark Navbar</a>
</div>
</nav>
<nav class="navbar bg-primary mt-2" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Primary Navbar</a>
<a class="btn btn-light btn-sm" href="#">Log in</a>
</div>
</nav>
</body>
</html>Fixed and Sticky Navbars
| Class | Effect |
|---|---|
fixed-top | Always at the top of the screen, even when scrolling; it covers content, so add top padding to the body |
sticky-top | Scrolls with the page until it reaches the top, then sticks |
fixed-bottom | Always at the bottom of the screen |
sticky-top is often the easiest, because it does not cover your content.
Exercise
Exercise
What does the navbar-expand-md class do?