Bootstrap 4: Creating a Navigation Bar

Building your navigation is immensely important to any website, whether it is a single page, or a multi-page behemoth.

Bootstrap’s navbar is responsive , and supports branding, navigation, search and more.

Some basic info from Bootstrap’s site about Navbar, that you might want/need to know.

• Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
• Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
• Use the spacing and flex utility classes for controlling spacing and alignment within navbars.
• Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
• Navbars are hidden by default when printing. Force them to be printed by adding .d-print to the .navbar. See the display utility class.
• Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

Navbars do not need to be within a container. In fact, they usually are found outside of a container, and can be found at the top or bottom of the page, even both.

Navbar Content

Navbars support a lot of possible content for you to add. These include things like brand, navigation, inline forms, static text, links for when the menu bar is collapsed, etc.

All of these are contained within other elements, and given classes to make the navbar work. Let’s look at building a basic navbar.

Navbar Examples

Here is an example of a navbar with just the brand element. I personally like to always use it as a link, although you don’t have to, so that if a person clicks/touches the logo/text, you are taken to the homepage.

Branding

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

You can also add images, although you will often need to add some classes to the image, like you see here.

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Navigation Links

Adding the navigation links is actually fairly consuming. This is because you have to include the collapse menu option, as well as the menu option.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Notice in this example you see individual links for each reference. You can also use an unordered list, and find many examples like that. Notice how it specifies which link is disabled, and by using the class navbar-expand-lg on the nav, it lets you know the smallest you can expect to see the entire menu. After that, it will go to a collapsed menu.

The .active class lets the user know the current page, and bolds that menu option.

Plain Text

You might be wondering why someone would use plain text in their navbar. Well, there are a couple of reasons, but the most common one would be if you wanted to make sure your company motto, or similar value, is displayed at the top of each page.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

Colors

You can change the colors of your navbar by using the classes: navbar-dark bg-dark or navbar-dark bg-primary or related. You can also specify a style and define a color in there if you wanted.

Positioning

You can use fixed-top, fixed-bottom, or even sticky-top as a class on your navbar to help position it. However, sticky-top is not fully supported in all browsers, and you may not want to use it for that reason.

Bootstrap 4: Creating a Navigation Bar was originally found on Access 2 Learn