Top Navigation Bar Widgets for 2018: Bootstrap and jQuery Mobile

WEBINAR:On-Demand

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 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:

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":

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:

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!

Rob Gravelle resides in Ottawa, Canada. His design company has built web applications for numerous businesses and government agencies. Email him.

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).

IT Solutions Builder
TOP IT RESOURCES TO MOVE YOUR BUSINESS FORWARD

Which topic are you interested in?

Mobile

Security

Networks/IoT

Cloud

Data Storage

Applications

Development

IT Management

Other

What is your company size?

What is your job title?

What is your job function?

Searching our resource database to find your matches...

Web Development Newsletter Signup

Advertiser Disclosure:
Some of the products that appear on this site are from companies from which QuinStreet receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. QuinStreet does not include all companies or all types of products available in the marketplace.

Thanks for your registration, follow us on our social networks to keep up-to-date