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.
If you’re using a screen reader, check out this guide for tips on using CodePen with a screen reader.
Create a new Pen
- To start a new pen, login to CodePen with your login information or use your Twitter or Facebook account.
- Click on your profile picture in the top right corner of the page and select “New Pen” from the dropdown menu.
- 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.
- Add a title for your pen (“Bootstrap Navigation”)
- Access the setings by clicking on the “Settings” button in the top right corner of the page.
- Select CSS on the left sidebar menu
- Find the box titled “Add External Stylesheets/Pens”
- Search for “Bootstrap”
- Select the first option that says “twitter-bootstrap”
- Select JS from the left sidebar
- Find the box that says “Add External Scripts/Pens”
- Search for “jQuery” and select the first option
- Search for “Bootstrap” and select the first options that says “twitter-bootstrap”
- Click the green “Save & Close” button in the bottom right corner of the window.
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
<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. 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
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
<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 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
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
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.
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.