Moving on in our Series of the Twitter Bootstrap Framework, we’ll now take a look at the many different options for Navigation. Bootstrap offers many ways to navigate a website by way of Breadcrumbs, Pagination, Tabs, Pills, Buttons, Panels, you name it, Bootstrap has got it. Let’s jump in and take a look at all of these great navigation elements now!
Breadcrumbs are not a Twitter Bootstrap only thing. In fact all of these navigation systems can be found on some of the other popular UI frameworks as well. So what are breadcrumbs? Well after I visit Panera Bread and wolf down a cinnamon crunch bagel in record time, it is what’s left on the table. Ha!! No, it’s the trail of links the user has taken to arrive at a particular destination on a website. They serve a great purpose for the user to easily navigate up and down the hierarchy of a given website. Breadcrumbs may also serve some benefit to your website’s SEO or Search Engine Optimization.
In Bootstrap, we make use of an HTML ordered list as the base component of the breadcrumb. Once this is in place, the Bootstrap classes which provide the slick design can easily be applied to give a nice and visually appealing style.
Here is an example of the code for breadcrumbs and the resulting look when we assign
breadcrumb to an ordered list:
You may be used to pagination when you do a Google or Bing search. Actually maybe you’re more of the DuckDuckGo type. In any event, when you search, you know that many thousands of results may be returned. Well, how can we deal with such a large number of results on the limited real estate available on a computer screen? The answer is with Pagination. Pagination is that boxed group of numbers at the bottom. Let’s search for Twitter Bootstrap to see an example of pagination:
Twitter Bootstrap gives you that same slick interface with the
pagination class, it quite slick, and easy to implement. In contrast to the Breadcrumbs component which uses Ordered Lists to provide the foundation for styling, the Pagination component uses Unordered Lists as its base. Keep this in mind when developing your site, because it is so easy to get the two confused! Ordered lists convey a sense that the order of elements is important. With breadcrumbs, this is certainly true. Since the breadcrumbs are providing a direction of sorts within the overall hierarchy, we need to be sure the navigation is reflecting accurate spaces in the overall design. Unordered lists do not give such precedence to the elements, they merely represent a collection of related items. Well this would make sense for a search result page, since when we search for a term, we are returned a collection of related internet links for the topic we are searching for. Let’s look at a Pagination example in Bootstrap:
<ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="active"><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul>
Tabs and Pills
In Twitter Bootstrap the base class for creating navigation is the
nav class. From there we can build on that style using both tabs and pills to fit the desired look you would like to achieve. We’ll use our Panda Web Design Company website to showcase some of these cool navigation options.
The first navigation style we can try is to make use of the Tabs navigation. For this example, we can take our existing four services that the Panda Web Design Company offers, and instead of listing all of these on the main page in four different columns, we can instead give each service it’s own dedicated tabbed area of the website. Recall the four services that the Panda Web Design Company offers are WordPress Custom Themes, Custom PHP Application Development, Search Engine Optimization, and Social Media Services. Here is the updated markup for this example:
Pills are another design option we can use on the very same HTML. Simply change this line:
<ul class="nav nav-tabs">
<ul class="nav nav-pills">
and you’ll note the design now making use of Pills.
I rather like the look of the Pills as they give a nice background during navigation that seems just a touch more user friendly than the tabbed versions. Of course beauty is in the eye of the beholder, and you may find you like the Tabbed look better. It all comes down to whichever design you and your audience will like best.
With another simple tweak to your
ul element, we can give a nice stacking effect to the menu selections. Simply add
nav-stacked to the
ul and observe the cool new look. If you have designed in native CSS before, you’ll know that to make a change like that would require a lot of trial, error, and time to get it right. With a powerful framework like Twitter Bootstrap, we make one simple class change to a DOM Element, and we get to modify the whole style of the webpage. It really is a great timesaver!
Twitter Bootstrap Navbar
The Bootstrap Framework ships with a really fantastic option for overall site navigation in the form of the self contained Navbar. The Navbar has many options, but the most common, and arguably useful is the default configuration of having the Navbar located at the top of the website. For our example we’ll add a dedicated Navbar to the top of Panda Web Design Company’s website using the following markup just inside of the
<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Panda Web Design</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">More Info <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Services</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Jobs</a></li> <li class="divider"></li> <li><a href="#">Investor Info</a></li> <li class="divider"></li> <li><a href="#">Contact Us</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Find It!</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Legal</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>
This give us this nice navigation menu as you can see right here:
Bootstrap gives us so many option to create clean and useful methods of navigation within our website designs. In this tutorial we covered some of them such as Tabs, Pills, Breadcrumbs, Pagination, and dedicated Navbars. Your designs are not limited to these however. Simply use your imagination to combine creative uses of buttons, links, and other elements to hammer out the exact design you want for your website.