Building a Navigation Bar

Bootstrap is a great framework that can be used in countless ways to give your website a clean and polished look. One of the most crucial parts of any website is its navigation. Without a an easily visible and clear element of navigation your site can easily confuse visitors and not entice them to explore everything your site has to offer. In this tutorial, we will create a basic navigation bar utilizing various classes from the Bootstrap framework. Here is an example of what we will be creating in both the full width and collapsed forms:

 

NavbarExample

NavbarExpanded

Navbars in Bootstrap include many features that are useful to developers:

  • One of the most important features of a Bootstrap navbar is the fact that it starts out collapsed in a mobile view, which can be toggled on and off. This means that when viewing the site on a mobile device all navigation links will be hidden because there is not enough room on the screen to display all the options. Instead a “hamburger” button is displayed when the screen width is less than the specified setting. Clicking the button will display a drop-down list of navigation links (as long as you have JavaScript enabled and included in your page).
  • The navbar includes a place for a  brand image or logo. This  can help set your brand apart visually from others  in the same field as well as create a lasting memory of your company for your visitors. In our example, I used a green leaf, which could signify that the company the site represents is involved in clean energy technologies, for instance.
  • Navbars can include many elements from other Bootstrap classes, bringing new functionality and appeal to the traditional navigation section. Some of these elements include buttons, button-groups, drop-down menus, and links to external sites.
  • Search boxes and other form elements can be inserted into your navbar. This is especially helpful when you might want users to be able to perform a search of your products from anywhere on the site. Putting a search field inside a navbar can help save space for content and create a consistent look across your site.
  • You can have your navbar wherever your like. Navbars can easily be aligned to either the left or right side of a page, fixed at the top or bottom, or even positioned statically.

Start to Build the Navbar

To begin building the navbar, create the following tags:

Code_Navbar_Container

Wrapping the elements that will be shown on the navbar in the .container-fluid class will ensure proper functionality for various screen sizes.

Now that we have a basic navigation element, we can start putting elements inside. The first thing we will put in the navbar is the header . The navbar header is a section of the navigation that will be seen by most users. This is also where you can display your brand or logo on your site. For this tutorial, we will be adding a brand in the form of a glyphicon, non-clickable text that will always display, and a “hamburger” button we will use to activate the drop-down menu when the page is displayed on a smaller screen.

To create a brand to your navbar, the .navbar-brand class needs to be added to a span element as follows:

Code_Navbar_Glyphicon

I used a leaf glyphicon as my brand, but you can use any text or image as your brand. A full list of glyphicons available in Bootstrap can be found at http://glyphicons.bootstrapcheatsheets.com/

Adding text that will remain visible on the navbar when viewing on a smaller device is easy with the .navbar-text class:

Code_Navbar_Text.PNG

The third item we’ll be adding to this navbar is the “hamburger” button. This button is visible only when the page is viewed on a mobile device. When clicked, the button will display a drop-down menu containing the menu items from the full-size navbar. Creating the button is simple, using three span elements stacked on to of one another. The code to create a “hamburger” button looks like this:

Code_Navbar_Hamburger.PNG

Putting what we have together so far looks like this:

Code_Navbar_Phase1.PNG

When viewed on a mobile device, your navbar should resemble the following:

Example_Navbar_Phase1.PNG

We can now begin to add additional functionality to the navbar. We will include a list of clickable navigation items, a drop-down menu within the navbar, text with an embedded link, a search box, and a contact button. Keep in mind these items will only be visible when viewing the page on a desktop browser. Mobile devices will put these menu items into the drop-down menu that is utilized with the “hamburger” button. In order to make any navigation element responsive with Bootstrap, they must be wrapped in the .collapse and .navbar-collapse classes:

Code_Navbar_Collapse_Container.PNG

The first menu items we will put in our collapsible div are the list items of an unordered list. Make sure to use the .nav and .navbar-nav classes so your items will display correctly. Adding the .active class to a list item on a navbar will highlight that item, letting users know that is the page they are currently viewing. The code to include these items looks like this:

Code_Navbar_Items

The drop-down menu will be added to this same unordered list as its own list item. Using the .dropdown and .dropdown-toggle class allows us to create a link that will toggle the drop-down menu holding another unordered list with its menu items.  Here is the code (you can see the new drop-down list item has its own list where the menu items will be stored) :

Code_Navbar_Dropdown.PNG

If we take a moment to run the code that we have so far, it should resemble the following when viewed on the desktop:

Example_Navbar_Phase2.PNG

We can now add our last three elements to our navbar, starting with the embedded link. Creating this item is similar to when we created the non-clickable item that said “My Site” Here we will utilize the same .navbar-text class, but some of the text will be wrapped in an anchor tag, allowing us to link to another destination. The code to create this item looks like this:

Code_Navbar_Embed_Link.PNG

Now users can click the word “Green” on the navbar, directing them to a new page.

Many navigation menus include a search box that allows visitors to search for products, articles, images, etc. that exist on that site. This function is usually found across all pages on a web site, which means placing it in the navbar is an ideal location for maximum visibility. The code to include a search box in your navbar is as follows:

Code_Navbar_Search.PNG

Using the .navbar-right class pushes the search box all the way to the right side of the navbar. That brings us to our final element, the “Contact Us” button. This button will also use the .navbar-right class to place the item on the right side of the navbar. Creating a navbar button is exactly the same as creating a Bootstrap button anywhere else on your page. The code looks like this:

Code_Navbar_Button

This was the last element we are adding to our navbar, so putting all the code from our collapsible div together we get this:

Code_Navbar_CollapsibeDiv.PNG

When we include the collapsible div under the navbar-header div the navbar code is complete:

Code_Navbar_Complete.PNG

Example_Navbar_Complete.PNG

While looking at the code all at once may seem intimidating, remember building the navigation bar is a step-by-step process. Begin by creating the containers that will hold your elements, and then include each element you want one by one, testing each as you go. Now that you have a basic Bootstrap navbar built, go ahead and play with some of the settings to create a navbar that suits your style.

-Happy coding,

Michal Patriak

 

 

 

 

Advertisements

Author:

I am a software development student eagerly exploring the software industry.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s