Bootstrap’s navbar is a powerful, responsive component to provide sensible navigation around a website. Before getting into the details, let’s add the navbar to the top of our page (right below the body tag) and see what happens:
<nav class=”navbar navbar-expand navbar-light”>
<a class=”navbar-brand” href=”#”>MyPhoto</a>
<div class=”collapse navbar-collapse”>
<ul class=”navbar-nav mr-auto”>
<li class=”nav-item”>
<a class=”nav-link” href=”#welcome”> Welcome</a>
</li>
<li class=”nav-item”><a class=”nav-link” href=”#services”> Services</a>
</li>
<li class=”nav-item”><a class=”nav-link” href=”#gallery”> Gallery</a></li>
<li class=”nav-item”><a class=”nav-link” href=”#about”> About</a></li>
<li class=”nav-item”><a class=”nav-link” href=”#contact”> Contact Us</a></li>
</ul>
</div>
</nav>
Take a look at the screenshot in figure 3.12:
Figure 3.12: Using Bootstrap’s navbar to provide navigational links to MyPhoto’s Welcome, Services, Gallery, About, and Contact Us sections (example11.html)
With that, we have a navigation for our single page site. Let’s break it down.
For accessibility and semantic purposes, we use the nav tag as the parent element. We can use the role=”navigation” attribute on a div element, but using nav is semantically clearer (note that using both nav and role=”navigation” is redundant and hence discouraged). We apply the navbar class, which is where Bootstrap starts its magic. The navbar class sets the dimensions and positioning of the navigation bar. The navbar-light property applies some styling to keep in line with Bootstrap’s default style guide.
The first element in the nav family is a navbar-brand element. This element is used to apply styling to differentiate the brand of the page, such as a specific logo or font style, to the other elements within the nav.
Inside a div with the collapse navbar-collapse classes applied (these classes allow us to hide the navbar contents using the parent breakpoint), we have a ul element. Within this ul, we nest a list of list item elements that contain the anchors to various sections on our page. Each list item element has a nav-item class applied to it; each anchor has a nav-link class. The former adjusts the element’s margin and ensures the element’s positioning within the container by setting its float property. The latter adjusts the anchor element’s styling, removing its text decoration and default colors.
If you click on Services, nothing happens. This is because we also need to update the sections with the corresponding id for each section. Let’s do that now. For example, add id=”services” to the Welcome section (example12.html):
<div class=”container-fluid myphoto-section bg-myphoto-welcome”
id=”services”>
Now, if we click on Services in the nav, the browser switches focus on the Services section.
Navigation in Bootstrap 3
The entire navbar component has been rewritten in Bootstrap 4 in an effort to make the navbar simpler and easier to use. Bootstrap 4 introduced the nav-item class for use on the list items and added the nav-link class for use with the anchor element. Neither of these two aforementioned classes exists in Bootstrap 3.
Take a look at the following screenshot:
Figure 3.13: Clicking on Services in the nav, the browser scrolls us down to the Services section. Observe how the string “#services” is appended to the URL in the address bar
In its current state, the navigation list wraps onto a new line, which wraps when the list is too long for the given resolution. Take a look at the following screenshot:
Figure 3.14: The navbar items wrapping onto a new line of smaller resolutions (example11.html)
This is not very Bootstrap-like. Of course, Bootstrap provides a straightforward solution for this. Bootstrap’s solution is to use the hamburger interface at lower resolutions. First, let’s add the hamburger. Within the nav element—right after the navbar-brand anchor tag—we add the following code:
<button
class=”navbar-toggler”
type=”button”
data-toggle=”collapse”>
<span class=”navbar-toggler-icon”></span>
</button>
Then, replace the navbar-expand class with navbar-expand-lg. The navbar-expand-* classes use the usual (sm, md, lg, and xl) break points to show or hide the contents of the navbar, replacing it with a hamburger as shown in figure 3.15:
Figure 3.15: Adding a hamburger button to our navigation bar (example12.html)
At lower resolutions, the hamburger now appears on the right-hand side. However, clicking on the hamburger button has no effect. In order to hook the hamburger and the links together, we first add an id attribute to the parent div of the links and then reference that id in a data-target attribute in the hamburger button element. Note how we also previously applied the collapse and navbar-collapse classes to the link’s parent element. These classes effectively make the navigation links disappear at smaller resolutions:
<div class=”collapse navbar-collapse” id=”navigation”>
<button
type=”button”
class=”navbar-toggle collapsed”
data-toggle=”collapse”
data-target=”#navigation”
aria-expanded=”false”>
<span class=”navbar-toggler-icon”></span>
</button>
</div>
For accessibility purposes, we can also add aria-controls=”navigation” and aria- label=”Toggle navigation”:
<button
type=”button”
class=”navbar-toggler”
data-toggle=”collapse”
data-target=”#navigation”
aria-expanded=”false”
aria-controls=”navigation” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
Take a look at the screenshot in figure 3.16:
Figure 3.16: Making the navigation links disappear on smaller resolutions (example12.html)
Now, on smaller viewports, the list of links is no longer visible; the hamburger icon appears, and the list of links appears once the button has been activated. This provides a much better experience on smaller resolutions.
Now that we have our sections and navigation working, let’s add a drop-down menu to our navigation to provide the user with the secondary features: Profile, Settings, and Log Out.
To do this, we will use Bootstrap’s drop-down class. As a child of the list of section links, create a new list item element with Bootstrap’s nav-item class. As previously noted, this defines the element as a Bootstrap navigation item and renders it alongside the other items within our navbar. To the same list item, we also apply the dropdown class. Within the list element, we include an anchor tag responsible for surfacing the drop-down navigation:
<div class=”collapse navbar-collapse” id=”navigation”>
<button
type=”button”
class=”navbar-toggle collapsed”
data-toggle=”collapse”
data-target=”#navigation”
aria-expanded=”false”>
<span class=”navbar-toggler-icon”></span>
</button>
</div>
Refer to figure 3.17:
Figure 3.17: A drop-down menu item (example13.html)
Great, it looks nice and neat. Of course, it doesn’t do anything yet. We need to create the menu we want it to surface. As a child of the Profile anchor tag, add a div element;;2;this time with Bootstrap’s dropdown-menu class, to denote that this is the element we want the drop-down to surface, with four list elements:
<li class=”nav-item dropdown”>
<a
href=”#”
class=”nav-link dropdown-toggle”
data-toggle=”dropdown”
role=”button”
aria-haspopup=”true”
aria-expanded=”false”>
Profile <span class=”caret”></span>
</a>
<div class=”dropdown-menu dropdown-menu-right”>
<a class=”dropdown-item” href=”#”>
Profile
</a>
<a class=”dropdown-item” href=”#”> Settings
</a>
<div class=”dropdown-divider”></div>
<a class=”dropdown-item” href=”#”>
Logout
</a>
</div>
</li>
Take a look at the screenshot in figure 3.19:
Figure 3.19: The expanded drop-down menu item, listing three subitems (example13.html)
We also add a dropdown-menu-right class to align the drop-down menu to the right. Now we have a list of links in a drop-down menu, and as you can see, we leveraged Bootstrap’s dropdown-divider class to provide a visual cue to the separation between Profile functionality and logging out of the site.
The dropdown class itself simply sets the CSS position property to relative. There are several other classes specifying how the drop-down menu, and other items within the dropdown such as the divider, look and behave. All these style definitions can be found in bootstrap/scss/_dropdown.scss. The interactions and behaviors of the drop-down component are actually handled and triggered by an out-of-the-box Bootstrap library—dropdown.js. The dropdown.js uses CSS selectors to hook into dropdown- specific elements and toggles CSS classes to execute certain behaviors. You can find the drop-down library at node_modules/bootstrap/js/dist/dropdown.js.
While we have the drop-down menu entry itself working, the profile menu entry will only be visible to logged-in users, and following popular UI conventions, should be aligned to the right. To achieve this, we create a separate ul navbar for it, and pull this navbar to the right:
<ul class=”navbar-nav pull-right”>
<li class=”nav-item dropdown “>
<a href=”#”
class=”nav-link dropdown-toggle”
data-toggle=”dropdown”
role=”button”
aria-haspopup=”true”
aria-expanded=”false”>
Profile <span class=”caret”></span>
</a>
<div class=”dropdown-menu dropdown-menu-right”>
<a class=”dropdown-item” href=”#”>
Profile
</a>
<a class=”dropdown-item” href=”#”>
Settings
</a>
<div class=”dropdown-divider”></div>
<a class=”dropdown-item” href=”#”>
Logout
</a>
</div>
</li>
</ul>
Figure 3.20: The expanded drop-down menu item, listing three subitems, aligned to the right (example14.html)
As nice as the dropdown is, it doesn’t actually do anything. Rather than having the user leave the page to use secondary functionality, let’s render the functionality in modal windows instead.
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.