Bootstrap - Navbar - Class

   
   
 bootstrap  css  
 frontend  
Article Series

Bootstrap5 article series.

Supplementary Article for Sass.

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Step Two: Common navigation bar.

You can extract long bootstrap navbar into a few chunks. Instead of explaining how about bootstrap class works, this section is more like building block to build a page, with complex navigation bar.

Responsive Navigation Bar Component

Bootstrap used to be so popular. Bootstrap navigation bar could make your site, similar to any other website. Before planning customization, you might need to know common things, to build your very own navigation bar.

The bootstrap class for navigation bar is, already provided well in both documentation and examples, So i won’t repeat myself here.

Writing

Why do I write this article over and over again?

Because I failed many times.

That force me to write, so I can repeat successfull attempt.

1: Chapter Overview

Consider examine the directory structure.

Source Code: Step-02

You can access the source code for this chapter, by clicking on the following link:

Bootstrap v4

The obsolete Bootstrap v4 article series is also available.

Plain HTML

Compiled HTML Document

The static files generated by the Nunjucks templates is as below:

❯ ls *.html
021-navbar-minimal.html  023-navbar-long.html
022-navbar-simple.html

Bootstrap5: Directory Structure: Compiled

Assets

CSS and Javascript

Consider examine directory for respective assets. I change the structure a bit. Now all assets is in assets folder. I also add logo as custom assets.

❯ tree -C assets
assets
├── css
│   ├── bootstrap.css
│   └── bootstrap.css.map
├── images
│   └── logo-gear.png
└── js
    ├── bootstrap.min.js
    └── popper.min.js

4 directories, 5 files

The dropdown in bootstrap menu based on tooltip. This tooltip is provided by Popper javascript. The popper itself has evolve to Float UI javascript library.

Bootstrap5: Directory Structure: Assets

We are going to need them for the rest of this chapter.

Templates

Nunjucks

This is just a complete list. We are going to break down one by one, for each navbar template.

❯ tree -C views
views
├── 021-navbar-minimal.njk
├── 022-navbar-simple.njk
├── 023-navbar-long.njk
├── contents
├── heads
│   ├── 020-meta.njk
│   ├── 021-links.njk
│   └── 023-links.njk
├── layouts
│   └── base.njk
└── shared
    ├── 021-navbar.njk
    ├── 022-navbar-collapse.njk
    ├── 022-navbar.njk
    ├── 023-navbar-button.njk
    ├── 023-navbar-collapse.njk
    ├── 023-navbar-dropdown.njk
    └── 023-navbar.njk

5 directories, 14 files

Bootstrap5: Directory Structure: Templates

We have only two common templates here:

  • Base Layout, and
  • Meta Head.

Layout

Reusable Parent Template

This is the skeleton for the building block. The base layout is very simple.

<!DOCTYPE html>
<html>

<head>
  {% block htmlhead %}
  {% endblock %}
</head>

<body>
  {% block navbar %}
  {% endblock %}
</body>

</html>

Bootstrap5: Nunjucks: Base Layout: Parent Template

Meta

Nothing special with meta. I just change the title form time to time.

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,
    initial-scale=1, shrink-to-fit=no">
  <title>Should you decide to accept.</title>

Bootstrap5: Nunjucks: Heads: Meta

You are free to use your custom logo. I actually made some logo, and here we can use it as an example for this guidance.

Bootstrap Navigation Bar: Custom Logo

  • Size [width x height]: 96px * 96px

2: Minimal

Having Bootstrap navigation bar is simple. You can examine each class in Bootstrap official documentation.

Templates

Nunjucks

Here is the required templates.

views
├── 021-navbar-minimal.njk
├── heads
│   ├── 020-meta.njk
│   └── 021-links.njk
├── layouts
│   └── base.njk
└── shared
    └── 021-navbar.njk

Blocks

Nunjucks Document Source

{% extends './layouts/base.njk' %}

{% block htmlhead %}
  {% include './heads/020-meta.njk' %}
  {% include './heads/021-links.njk' %}
{% endblock %}

{% block navbar %}
  {% include './shared/021-navbar.njk' %}
{% endblock %}

Bootstrap5: Nunjucks: Blocks: Minimal Navigation bar

HTML Head

Assets: Resource Links

Prepare the head first.

  <link rel="stylesheet" type="text/css" 
    href="assets/css/bootstrap.css">

Bootstrap5: Nunjucks: Heads: Links

Bootstrap 5 Class

  <nav class="navbar navbar-expand-md
      navbar-dark bg-dark">
    <div class="navbar-collapse">
      <ul class="navbar-nav mx-2">
        <li class="nav-item">
          <a class="nav-link active"
             href="#">Home <span
             class="visually-hidden"
            >(current)</span></a>
        </li>
      </ul>
    </div>
  </nav>

Bootstrap5: Nunjucks: Shared: Minimal Navigation Bar

Whether you want to add visually-hidden class for accesability is your choice. I put visually-hidden whenever possible in real life site, but I omit them for the sake of simplicity in this tutorial.

Browser Preview

Screenshot

You can see the respective result as below figure.

Bootstrap5: Qutebrowser: Minimal Navigation Bar

Static Page

HTML Document Target

The nunjucks template will generate this static page below.

3: Simple

Responsive Design

We need to examine how the navigation bar, response to different size of page.

Consider change the body part of html a bit. Put some stuff in the navigation header such as logo.

Templates

Nunjucks

Here is the required templates.

views
├── 022-navbar-simple.njk
├── heads
│   ├── 020-meta.njk
│   └── 021-links.njk
├── layouts
│   └── base.njk
└── shared
    ├── 022-navbar-collapse.njk
    └── 022-navbar.njk

Blocks

Nunjucks Document Source

{% extends './layouts/base.njk' %}

{% block htmlhead %}
  {% include './heads/020-meta.njk' %}
  {% include './heads/021-links.njk' %}
{% endblock %}

{% block navbar %}
  {% include './shared/022-navbar.njk' %}
{% endblock %}

Bootstrap5: Nunjucks: Blocks: Simple Navigation bar

HTML Head

This still use the same assets links as previous template.

Bootstrap 5 Class

Here I represent navbar for use with responsive design later.

  <nav class="navbar navbar-expand-md navbar-dark
         bg-dark fixed-top ">
    <a class="navbar-brand ms-4" href="#">
       <img src="assets/images/logo-gear.png"
         alt="Home" width="32" height="32"/>
    </a>
    {% include './022-navbar-collapse.njk' %}
  </nav>

Bootstrap5: Nunjucks: Shared: Simple Navigation Bar

Collapsible Menu

While the collapse chunk is:

<div class="collapse navbar-collapse">
  <ul class="navbar-nav me-2">
    <li class="nav-item">
      <a class="nav-link active" href="#"
        >Blog <span class="visually-hidden"
        >(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link active"
         href="#">About</a>
    </li>
  </ul>
</div>

Bootstrap5: Nunjucks: Shared: NavBar: Collapse

Browser Preview

Screenshot

You can have a look at the expected result in image below:

Bootstrap5: Qutebrowser: Simple Navigation Bar

Notice that as bootstrap default, the blog menu and about menu won’t be shown in small screen. So you need a desktop screen to see this.

Bootstrap5: Qutebrowser: Simple Navigation Bar - Wide

Or access with burger menu in the next section.

Static Page

HTML Document Target

You can examine the generated output below, directly using browser.

4: Long

Stuffed with Items

Consider populate the navigation bar with more menu and stuff. The item is self explanatory.

Templates

Nunjucks

Here is the required templates.

views
├── 023-navbar-long.njk
├── heads
│   ├── 020-meta.njk
│   └── 023-links.njk
├── layouts
│   └── base.njk
└── shared
    ├── 023-navbar-button.njk
    ├── 023-navbar-collapse.njk
    ├── 023-navbar-dropdown.njk
    └── 023-navbar.njk

Blocks

Nunjucks Document Source

{% extends './layouts/base.njk' %}

{% block htmlhead %}
  {% include './heads/020-meta.njk' %}
  {% include './heads/023-links.njk' %}
{% endblock %}

{% block navbar %}
  {% include './shared/023-navbar.njk' %}
{% endblock %}

Bootstrap5: Nunjucks: Blocks: Long Navigation bar

HTML Head

Assets: Resource Links

  <link rel="stylesheet" type="text/css"
    href="assets/css/bootstrap.css">

  <script src="assets/js/popper.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>

Bootstrap5: Nunjucks: Heads: Links

Bootstrap 5 Class

  <nav class="navbar navbar-expand-sm navbar-dark
    fixed-top bg-dark">

    <div class="container-fluid">
      <a class="navbar-brand ms-4" href="#">
         <img src="assets/images/logo-gear.png"
           alt="Home" width="32" height="32"/>
      </a>

      {% include './023-navbar-button.njk' %}
      {% include './023-navbar-collapse.njk' %}
    </div>

  </nav>

You can change the navbar-expand-sm to navbar-expand-md, to suit your needs.

Bootstrap5: Nunjucks: Shared: Long Navigation Bar

Burger Button

The common burger button chunk is shown as below:

      <button type="button"
         class="navbar-toggler"
         data-bs-toggle="collapse"
         data-bs-target="#navbarCollapse"
         aria-controls="navbarCollapse"
         aria-expanded="false"
         aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

Bootstrap5: Nunjucks: Shared: Navbar: Button

Collapsible Menu

The collapse chunk is shown as below:

<div class="collapse navbar-collapse"
     id="navbarCollapse">

  <ul class="navbar-nav me-auto">
    <li class="nav-item">
      <a class="nav-link active" href="#"
        >Blog <span class="visually-hidden"
        >(current)</span></a>
    </li>
    <li class="nav-item dropdown">
      {% include './023-navbar-dropdown.njk' %}
    </li>
    <li class="nav-item">
      <a class="nav-link active" href="#"
        >About</a>
    </li>
  </ul>
  <form class="d-flex form-inline mt-2 mt-md-0">
    <input type="text"
      class="form-control mr-sm-2"
      placeholder="Search" aria-label="Search"
      role="search">
    &nbsp;
    <button
      class="btn btn-outline-light my-2 my-sm-0"
      type="submit">Search</button>
  </form>

</div>

Bootstrap5: Nunjucks: Shared: Navbar: Collapse

The template above is originally long. So I move the dropdown part into its own chunk.

Bootstrap has a very nice dropdown menu.

      <a class="nav-link active dropdown-toggle"
         data-bs-toggle="dropdown"
         aria-expanded="false" href="#"
        >Archives</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item"
                href="#">By Tags</a></li>
        <li><a class="dropdown-item"
                href="#">By Category</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item"
                href="#">By Chronology</a></li>
      </ul>

Bootstrap5: Nunjucks: Shared: Navbar: Dropdown

This require popper javascript library.

Browser Preview

Screenshot

You can see the respective result as below figure.

This is how it looks in portrait mobile phone or any small size. The menu collapse into burger button.

Bootstrap5: Qutebrowser: Navbar: Collapse

Then the burger button can be clicked to expand.

Bootstrap5: Qutebrowser: Navbar: Expand

In landscape mobile phone, all menu shown.

Bootstrap5: Qutebrowser: Navbar: Wide

Static Page

HTML Document Target

You can examine the static HTML above, without nunjucks template.

What is Next 🤔?

We have a few icon set for use with Navigation Bar in Bootstrap.

Consider continue reading [ Bootstrap5 - Navigation Bar - Awesome ].