One of the key elements of a web page, the Navigation Bar (or Navbar for short) contains links to the site’s main sections; usually represented by menu buttons, links, or tabs. Like the header, this content usually remains consistent from one web page to another. While it’s easy enough to create a basic Navbar, once you factor in the responsivity required to cater to a plethora of devices, any extra complexity will introduce bugs to one device or another. For that reason, you may want to forgo building it yourself in favor of employing a third-party widget. Many are freely available as part of libraries offered by some of the biggest providers in the business.
I described how to build your own Navbar in my Building Responsive Web Page Headers tutorial. In this series, I’ll be presenting some good components that you can use to make your Navbar look and behave optimally in any size viewport. In today’s installment I’ll be covering Bootstrap and jQuery Mobile.
Bootstrap Navbar
Bootstrap is an HTML, CSS, and JavaScript framework for building responsive designs that adapt to PCs, tablets and mobile phones with little or no customization on your part. The convenience of being able to code for multiple platforms at once has made Bootstrap the framework of choice for many web designers and developers.
I covered the Bootstrap Navbar previously in my Bootstrap Component Tour series. In it, I explained how to use the Navbar in your web pages. To recap, the Bootstrap library consists of three folders: one for JavaScript files, one for CSS files, and the other for glyphicon fonts. You can either upload these to your web host or simply link to CDN-hosted (Content Delivery Network) files from your pages. A good CDN for bootstrap is BootstrapCDN. It’s included in this basic template:
<html> <head> <meta charset="utf-8"> <title>Basic Bootstrap Template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> </head> <body> <h1>Basic Bootstrap Template</h1> <! -- page content -- > <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </body> </html>
The Bootstrap Navbar comes with built-in support for a handful of sub-components. All you need to do is include the relevant CSS classes:
.navbar-brand
for your company, product, or project name..navbar-nav
for a full-height and lightweight navigation (including support for dropdowns)..navbar-toggler
for use with our collapse plugin and other navigation toggling behaviors..form-inline
for any form controls and actions..navbar-text
for adding vertically centered strings of text..collapse.navbar-collapse
for grouping and hiding navbar contents by a parent breakpoint.
The Navbar can be themed to easily apply a specific look:
At that time of my Bootstrap Component Tour article, version 4 was in Alpha; now, version 4.1.1 is the latest release. You can download it here.
jQuery Mobile
jQuery Mobile is a HTML5-based UI system designed to make responsive web sites and apps that are accessible on all types of devices, including smartphones, tablets and desktops. It uses a build tool to create a custom bundle that contains only the components you need. The builder generates a custom JavaScript file, as well as full and structure-only CSS stylesheets for production use.
The jQuery Mobile includes a number of feature-rich Widgets. These are stateful plugins that possess a full life-cycle, along with methods and events. jQuery Mobile has a basic navbar widget that is useful for providing up to 5 buttons with optional icons in a bar. From there, additional classes can be added for more complex configurations.
For instance, icons can be added to navbar items by adding the “data-icon” attribute specifying a standard mobile icon to each anchor. By default, icons are added above the text (data-iconpos=”top”), but they can be positioned anywhere by changing the value to either “bottom”, “left”, or “right”:
As you can see, the HTML is quite simple:
<div data-role="navbar"> <ul> <li><a href="#" data-icon="grid">Summary</a></li> <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li> <li><a href="#" data-icon="gear">Setup</a></li> </ul> </div>
You can add any of the popular icon libraries like Glyphish to achieve the iOS style tab that has large icons stacked on top of text labels. All that is required is to include some custom styles to link to the icons and position them in the navbar. Here is an example using Glyphish icons:
Here’s the source for that example:
<div data-role="navbar" class="nav-glyphish-example" data-grid="d"> <ul> <li><a href="#" id="chat" data-icon="custom">Chat</a></li> <li><a href="#" id="email" data-icon="custom">Email</a></li> <li><a href="#" id="skull" data-icon="custom">Danger</a></li> <li><a href="#" id="beer" data-icon="custom">Beer</a></li> <li><a href="#" id="coffee" data-icon="custom">Coffee</a></li> </ul> </div>
Conclusion
Unless you only need a basic Navbar, it’s usually best to rely on a tried-and-true third-party library. In this instalment, we reviewed the excellent Bootstrap and jQuery Mobile Navbars. We’ll check out a few more next time!