Top Navigation Bar Widgets for 2018: Bootstrap and jQuery Mobile
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.
<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-brandfor your company, product, or project name.
.navbar-navfor a full-height and lightweight navigation (including support for dropdowns).
.navbar-togglerfor use with our collapse plugin and other navigation toggling behaviors.
.form-inlinefor any form controls and actions.
.navbar-textfor adding vertically centered strings of text.
.collapse.navbar-collapsefor grouping and hiding navbar contents by a parent breakpoint.
The Navbar can be themed to easily apply a specific look:
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>
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!
Rob's alter-ego, "Blackjacques", is an accomplished guitar player, who has released several CDs and cover songs. His band, Ivory Knight, was rated as one of Canada's top hard rock and metal groups by Brave Words magazine (issue #92).