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:
Navbars in Bootstrap include many features that are useful to developers:
- 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:
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:
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:
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:
Putting what we have together so far looks like this:
When viewed on a mobile device, your navbar should resemble the following:
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:
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:
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) :
If we take a moment to run the code that we have so far, it should resemble the following when viewed on the desktop:
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:
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:
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:
This was the last element we are adding to our navbar, so putting all the code from our collapsible div together we get this:
When we include the collapsible div under the navbar-header div the navbar code is complete:
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.