Twitter Bootstrap Navigation Elements

Click to share! ⬇️

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!

Bootstrap Breadcrumbs

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.

Ordered List

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:

Pagination

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:

Unordered List

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.

Tabs

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:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Panda Web Design Company</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/respond.js"></script>
</head>

<body>
<div class="container"> 
  <!-- row 1 -->
  <div class="row">
    <div class="col-lg-6 col-sm-5"> <a href="#"><img class="img-responsive img-rounded" src="img/panda.png" alt="Panda Web Design Company"></a> </div>
    <div class="col-lg-6 col-sm-7"> <img class="img-responsive" src="img/websites.jpg" alt=""> </div>
  </div>
  
  <!-- row 2 -->
  <div class="row">
    <h1> We make your website ready for the 21st Century!</h1>
    <p>At Panda Web Design Company, we strive to bring your brick and mortar business into the modern age ready to server your clients and promote your services.</p>
  </div>
  <ul class="nav nav-tabs">
    <li><a href="#wordpress" data-toggle="tab">Wordpress Custom Themes</a></li>
    <li><a href="#framework" data-toggle="tab" >Custom PHP Framework Solutions</a></li>
    <li><a href="#seo" data-toggle="tab">Taking SEO to your front door</a></li>
    <li><a href="#social" data-toggle="tab">Making Social Media an Asset to your Business</a></li>
  </ul>
  <div class="tab-content">
    <div id="wordpress" class="tab-pane active">
      <p><img class="img-responsive img-circle" src="img/wordpress.jpg" alt=""></p>
      <h4><span class="glyphicon glyphicon-ok"></span> WordPress Custom Themes</h4>
      <p>Wordpress remains one of the most popular open source CMS systems available and Panda Web Design Company will make sure you have the very best theme for your needs.</p>
      <p><a class="btn btn-primary" href="#">Read more >></a></p>
    </div>
    <div id="framework" class="tab-pane">
      <p><img class="img-responsive img-thumbnail" src="img/phpframeworks.jpg" alt=""></p>
      <h4><span class="glyphicon glyphicon-wrench"></span> Custom PHP Framework Solutions</h4>
      <p>If conducting custom ecommerce solution is part of your future, we can get you up and running with our various expertise in the leading PHP frameworks.</p>
      <p><a class="btn btn-success" href="#">Read more >></a></p>
    </div>
    <div id="seo" class="tab-pane">
      <p><img class="img-responsive img-thumbnail" src="img/seo.jpg" alt=""></p>
      <h4><span class="glyphicon glyphicon-search"></span> Taking SEO to your front door</h4>
      <p>Not only will Panda Web Design Company build you the best website and online presence possbile, we will get your site noticed in the search engines and bring customers to your front door.</p>
      <p><a class="btn btn-info" href="#">Read more >></a></p>
    </div>
    <div id="social" class="tab-pane">
      <p><img class="img-responsive img-rounded" src="img/socialmedia.jpg" alt=""></p>
      <h4><span class="glyphicon glyphicon-thumbs-up"></span> Making Social Media an Asset to your Business</h4>
      <p>Social media can take your website even further when combined with our excellent Search Engine Optimization services. Do not get left behind, include Social Media as a strategy for your business today.</p>
      <p><a class="btn btn-warning" href="#">Read more >></a></p>
    </div>
  </div>
  
  <!-- row 4 -->
  <div class="row"> <small>This website is simply a demonstration of using the Twitter Bootstrap framework to style and configure an example Web Design company business.</small> <small>Panda Web Design Company is a fictious web design company brought to you from <a href="https://vegibit.com">Vegibit.com</a></small> </div>
</div>
<!-- javascript --> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Pills

Pills are another design option we can use on the very same HTML. Simply change this line:

<ul class="nav nav-tabs">

to this:

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

Stack Em

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


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

Conclusion

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.

Click to share! ⬇️