Building a Bootstrap 4 Navigation Bar that Collapses

We can use builderJS with frameworks like Bootstrap to build awesome user interfaces! In this example, we'll walk through how to build a simple Bootstrap Navigation.

📸 How about some example screenshots?

It will look like this:

When on a smaller device:

That expands:

Template

This is going to be our starter template:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  </head>
  <body>
    <script src="builder.js"></script>
    <script>
      /* 
        This where our code will go!
      */
    </script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
  </body>
</html>

Create a Builder

We're going to need to create a Builder object, commonly created as b.

var b = new Builder();

Create Navigation Elements

Our navigation bar is going to be created using Bootstrap so that we have a responsive navigation that will provide a dropdown menu when the screen is too small to show the full navigation menu options without overflowing. Navbars in Bootstrap come with built-in support for a handful of sub-components that we can utilize.

🛠 We can compose them as individual elements to easily reference them later.

Navigation Brand

For your company, product, or project name. This will be a hyperlink back to the main page "/" with the text Company Name.

var navBarBrand = b.hyperlink({
  class: "navbar-brand", 
  href: "/", 
  text: "Company Name"
})

Navigation Toggle Button

We're going to need to create the button that our users will be able to see and click on when its been collapsed on smaller screens.

var navBarTogglerButton = b.button({
  class: "navbar-toggler", 
  type: "button", 
  "data-toggle": "collapse", 
  "data-target": "#navbarToggler",
  "aria-controls": "navbartoggler",
  "aria-expanded": false,
  "aria-hidden": true,
  html: b.span({ class: "navbar-toggler-icon" })
})

⚠️ We need to use "(quotes) around attributes for elements with certain characters in the name like - because JavaScript doesn't like these for keys.

Navigation Link

A link item with a link within the navigation that users can click on to navigate to another page in the application.

var navBarLink = b.listItem({ 
  class: "nav-item",
  html: b.hyperlink({ 
    class: "nav-link",
    href: "/link",
    text: "Link"
  })
})

Navigation Div

We need to create a div element which will be collapsable when users toggle the navBarTogglerButton.

var navBarDiv = b.div({
  class: ["collapse", "navbar-collapse"],
  id: "navbarToggler",
  html: b.unOrderedList({
    class: ["navbar-nav", "ml-auto"],
    html: navBarLink
  })
})

Put the elements together into a Navigation

Now that we have our navBarBrand, navBarTogglerButton, and our navBarDiv -- we can finally wrap them up in a navigation.

var navBar = b.nav({
  id: "navBar",
  class: ["navbar", "navbar-expand-lg", "navbar-dark", "bg-dark"],
  html: [
    navBarBrand,
    navBarTogglerButton,
    navBarDiv
  ]
})

To append the navigation to the document body:

b.append(navBar)

Output

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navBar">
  <a class="navbar-brand" href="/">Company Name</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbartoggler" aria-expanded="false" aria-hidden="true">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse" id="navbarToggler" style="">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item"><a class="nav-link" href="/link">Link</a></li>
    </ul>
  </div>
</nav>