Add a Navigation Bar to your Website using Bootstrap

One of the most important features of any website is the navigation bar. It’s that menu at the top of the page that has all the helpful links to the major pages on the website.

There’s a lot that goes into creating a navigation menu (navbar). Visually, the links are usually aligned horizontally across the top of the page for large screens like laptop and desktop computers. On small screens, like smartphones and tablets, the menu items are hidden, and replaced by a button that visitors can click to show the menu items. When the menu is shown, the links are usually aligned vertically. Some navbars are more complex, adding submenus under some of the menu item.

Coding all of this in HTML, CSS and JavaScript is challenging. I know because I’ve done it. Like any component of a web page, you need to have the content marked up in HTML. that means that your links should be placed in a list. Then, you need to style the list using CSS. Depending on the size of the screen and whether the menu is being shown or not, different styles need to be applied. to change those styles, you need JavaScript.

If you’re thinking “that sounds like a lot of work”, it is. Fortunately there are many CSS frameworks that have styles and JavaScript code that you can use for your navbar. The reason we have frameworks like Bootstrap is to make programming easier. In programming, we often solve the same problems over and over again in different projects. Instead of writing the same code each time, programmers organize the code into reusable units that they can use in any project. Just about every website or app has a navigation bar, so the developers who made Bootstrap wrote some code that makes it easy for anyone to add a navbar to their webstie.

In this tutorial, I’ll show you how to use Bootstrap to add a navbar to your website. It’ll have a few links to websites that you can visit to learn more about HTML, CSS, Bootstrap and JavaScript. To follow the tutorial, you should be familiar with HTML and how it works. Specifically, you need to know how to create HTML elements, and add attributes to them. For this tutorial, I’ll be using CodePen to write the code. You can see the finished navbar here. Once completed, you can copy the code into your website and change it to fit your needs.

Getting Started

If you’re using a screen reader, check out this guide for tips on using CodePen with a screen reader.

Create a new Pen

  1. To start a new pen, login to CodePen with your login information or use your Twitter or Facebook account.
  2. Click on your profile picture in the top right corner of the page and select “New Pen” from the dropdown menu.
  3. On the New Pen page, click on the pencil icon next to the text that says “untitled” in the top left corner of the page.
  4. Add a title for your pen (“Bootstrap Navigation”)

Pen Settings

  1. Access the setings by clicking on the “Settings” button in the top right corner of the page.
  2. Select CSS on the left sidebar menu
  3. Find the box titled “Add External Stylesheets/Pens”
  4. Search for “Bootstrap”
  5. Select the first option that says “twitter-bootstrap”
  6. Select JS from the left sidebar
  7. Find the box that says “Add External Scripts/Pens”
  8. Search for “jQuery” and select the first option
  9. Search for “Bootstrap” and select the first options that says “twitter-bootstrap”
  10. Click the green “Save & Close” button in the bottom right corner of the window.

About Bootstrap

Bootstrap is a CSS framework. that means that it contains mostly CSS code that we can use on our web pages. To use Bootstrap, you need to add classes to your HTML elements to make them look the way you want them to. Along with all the helpful CSS classes, Bootstrap also comes with JavaScript. Some parts of a website, like the navbar, are interactive. In order to make those interactions happen, we need to use JavaScript to tell the browser how to react to the things that the user can do on the page, like clicking a button to show a navigation menu. The JavaScript code in Bootstrap uses a JavaScript library called jQuery. jQuery makes it easy to pick HTML elements like buttons so that you can tell the browser what to do when a visitor interacts with it. In order for Bootstrap to work properly, be sure that you add jQuery before adding Bootstrap.

About the Navbar

Every Bootstrap navbar has a container with a bunch of classes. First, we need to tell Bootstrap that this is a navbar by adding the navbar class. Then, we need to tell Bootstrap when we want to show all the menu items. If you want to show the menu items for medium screen sizes and larger, add a class of navbar-extend-md. That will ensure that the visitor sees the menu items if they are using a tablet or computer, but it’ll hide the menu items and replace them with a toggle button if they are using a smartphone or smaller screen. Lastly, we need to tell Bootstrap which color theme the navbar is using. If the background is dark and you want the text to be light, use a class of mavbar-dark. If the background will be light and you want the text to be dark, use the nacbar-light class.

<nav class="navbar navbar-expand-md navbar-light bg-light">
	...
</nav>>	<!-- .navbar.navbar-expand-lg.navbar-light.bg-light -->

Bootstrap supports several components inside of the navbar. For example, a navbar can have a navbar-brand class where you can add a title or the logo of your website. On most websites the class is applied to a link to the home page with the site title or logo inside.

<nav class="navbar navbar-expand-md navbar-light bg-light">
	<a href="#" class="navbar-brand">Web Dev</a>
</nav>>	<!-- .navbar.navbar-expand-lg.navbar-light.bg-light -->

Note: If you’re not sure where you want a link to go or you haven’t completed the destination page yet, you can add a # symbol as a placeholder. It will cause the page to refresh when you click on the link. Don’t forget to remove all those placeholder links before launching the page on a live website.

Adding The Toggle Button

Another component in the navbar is the toggle button.It‘s typically a button element with a navbar-toggler class. Bootstrap uses this button to trigger the menu to open or close. to do that, we need to give the element a few more attributes. First, give it a type fo button. Then, add a data-toggle attribute and give it a value of collapse. The documentation doesn’t say exactly what this does, but if I had to guess, it might be telling Bootstrap what animation to play as the menu is transitioning between open and closed states. Next, the button element needs an attribute called data-target with a value of #navContent. The value, #navContent, is a selector. It tells JavaScript to look for an element that has an ID of navContent. We’ll get to ID’s in a bit.

Lastly, we’ll add some attributes to make the navbar screen reader friendly. Add an aria-controls attribute with a value of navbarContent. This attribute tells the screen reader what element we’re controlling with the button. It’s expecting an ID, so we can omit the # sign. The next attribute is aria-expanded. This attribute takes a value of ture or false. We want all the menu items to be hidden at first, in case the user is on a smartphone, so it should have a value of false. Lastly, we need an aria-label attribute. this is the text that the screen reader will say when the visitor selects the button. Bootstrap has JavaScript code that will change the values of these attributes while the user is visiting the page and interacting with the navbar.

<nav class="navbar navbar-expand-md navbar-light bg-light">
	<a href="#" class="navbar-brand">Web Dev</a>
	<button 
		class="navbar-toggler" 
		type="button" 
		data-toggle="collapse" 
		data-target="#navContent" 
		aria-controls="navbarContent" 
		aria-expanded="false" 
		aria-label="Toggle main navigation"
	> 
		...
	</button>	<!-- .navbar-toggler -->
</nav>>	<!-- .navbar.navbar-expand-lg.navbar-light.bg-light -->

Note: Whenever there are three or more attributes, I like to place them on separate lines. It makes them really easy to find later if they need to be changed. The browser doesn’t care where you place your line breaks, so it doesn’t matter if you write it out this way or leave them all on the same line. It’s a matter of personal preference.

Inside the button, we need an Icon for visitors to tap on mobile devices. This is usually a “hamburger” icon which consists of three horizontal lines. Bootstrap has a class for this called navbar-toggler-icon. Apply the class to a span element. span elements are like containers, but they’re only used for text. They make easy to assign styles to specific pieces of text (like if you wanted to unerline something). In this case, we’ll leave the content of the element blank, and Bootstrap will insert the hamburger icon.

<nav class="navbar navbar-expand-md navbar-light bg-light">
	<a href="#" class="navbar-brand">Web Dev</a>
	<button 
		,,,		
	>
		<span class="navbar-toggler-icon"></span>			
	</button>	<!-- .navbar-toggler -->
</nav>>	<!-- .navbar.navbar-expand-lg.navbar-light.bg-light -->


Adding the Main Content

Now that we have a button to open and close the menu, we need the element that is going to be shown and hidden. On the button, we referenced an element with an ID of navContent. ID’s are a unique piece of text that we can use to identify an element. That piece of text should only contain letters (lower or uppercase), numbers, dashes and underscores, but not spaces or special characters. They are often used in JavaScript to trigger different events on page elements. Along with the ID, we can add collapse and navbar-colapse as classes. Collapse refers to the animation that plays when this element is shown or hidden. If the element is being shown, its height will increase until the entire element. and everything inside of it, is shown. If the element is being hidden, the height will decrease to 0.

<nav class="navbar navbar-expand-md navbar-light bg-light">
	...
	
	<div class="collapse navbar-collapse" id="navContent">
		...
	</div>	<!-- .collapse.navbar-collapse -->
</nav>>	<!-- .navbar.navbar-expand-lg.navbar-light.bg-light -->

We want to hide and show the navigation menu for mobile screens, so we’ll add it in the navContent element. A navigation menu is usually an unordered list with the bullets removed . Bootstrap does all of this for us with the navbar-nav class. Additionally, add a ml-auto class so that the links will be on the right side or the page for large screens.

<div class="collapse navbar-collapse" id="navContent">
	<ul class="navbar-nav ml-auto">
		...
	</ul>	<!-- .navbar-nav -->
</div>	<!-- .collapse.navbar-collapse -->

Each link in the menu should be surrounded by an li (short for list item) element with a class of nav-link and each link should have a class of nav-link. The first list item should have an additional active class. That will style the text differently to indicate that it leads to the current page. When using the navbar in your own site, you’ll want to use JavaScript or some other programming language to move the active class depending on the page the visitor is currently looking at. The following are links to other websites where you can learn more about HTML, CSS, Bootstrap and JavaScript. Since these are all links that lead to other websites, we won’t worry about moving the active class.

<div class="collapse navbar-collapse" id="navContent">
		<ul class="navbar-nav ml-auto">
			<li class="nav-item active">
				<a href="#" class="nav-link">Home</a>
			</li>
			<li class="nav-item">
				<a 
					href="<https://www.w3schools.com/html/default.asp>" 
					class="nav-link" 
					target="_blank"
				>
					HTML
				</a>
			</li>
			<li class="nav-item">
				<a 
					href="<https://developer.mozilla.org/en-us/docs/Web/CSS/Reference>" 
					class="nav-link" 
					target="_blank"
				>
					CSS
				</a>
			</li>
			<li class="nav-item">
				<a
					href="<https://getbootstrap.com/docs/4.5/getting-started/introduction/>" 
					class="nav-link"
					target="_blank"
				>
					Bootstrap
				</a>
			</li>
			<li class="nav-item">
				<a
					href="<https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/>" 
					class="nav-link"
					target="_blank"
				>
					JavaScript
				</a>
			</li>
		</ul>	<!-- .navbar-nav -->
	</div>	<!-- .collapse.navbar-collapse -->

In order for external links to work on CodePen, each anchor tag needs to have a target attribute with a value of _blank. That tells the browser to open the page in a new tab.

Wrapping Up

You could also add a search bar to your navbar. There’s an example of how to do that in the Bootstrap documentation. You can copy and paste the examples from there, or build it yourself. It’s common for web developers to copy the code from the documentation and then modify it to fit their needs.

Leave a comment

Your email address will not be published. Required fields are marked *