Bulma Navbar

Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.

In this article, we will be seeing Bulma Navbar. A navbar is a very significant component of any website. Bulma provides a responsive horizontal navbar along with the images, links, buttons, and dropdown menus.

Bulma Navbar Classes:

navbar: This class is used for creating a navbar main content.
navbar-brand: This class is used for adding a header logo or header text in a navbar.
navbar-burger: This class is used for making a burger icon that toggles the navbar menu on small screen devices.
navbar-menu: This class is used for adding menu or items next to navbar-brand.
navbar-start: This class is used at the starting of the navbar.
navbar-end: This class is used at the ending of the navbar starting that the navbar last item.
navbar-item: This class is used to add an item to the navbar.
navbar-link: This class is used to link the dropdown menu.
navbar-dropdown: This class is used to create a dropdown menu consisting of navbar items.
navbar-divider: This class is used to add a horizontal line for separating the items.

Syntax:

<nav class="navbar" role="navigation" 
  aria-label="main navigation">
  <div class="navbar-brand">
    ...
    <a role="button" class="navbar-burger" 
    aria-label="menu">
      ...
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item"> Home </a>
      ...
    </div>   
    <div class="navbar-end">
      ...
    </div>
 </div>
</nav>

Example: Below example illustrates the Bulma Navbar using the above classes.

HTML

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content=

        "width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"

    />

  </head>

  <body>

    <div class="container">

        <!-- Navbar Starts here -->

      <nav class="navbar is-light" role="navigation"

           aria-label="main navigation">
 
        <!-- Navbar Brand containing the Heading -->

        <div class="navbar-brand">

          <a class="navbar-item has-background-success" href="#">

            <h1 class="has-text-white">GeeksforGeeks</h1>

          </a>
 
          <!-- Burger Icons for responsive navbar -->

          <a role="button"

            class="navbar-burger"

            aria-label="menu"

            aria-expanded="false"

            data-target="navbarBasicExample"

          >

            <span aria-hidden="true"></span>

            <span aria-hidden="true"></span>

            <span aria-hidden="true"></span>

          </a>

        </div>
 
        <!-- Navbar Menu containing a list of items -->

        <div id="navbarBasicExample" class="navbar-menu">

          <div class="navbar-start">

            <a class="navbar-item"> Home </a>
 
            <a class="navbar-item"> Blogs </a>
 
            <div class="navbar-item has-dropdown is-hoverable">

              <a class="navbar-link"> More </a>
 
              <div class="navbar-dropdown">

                <a class="navbar-item"> About us </a>

                <a class="navbar-item"> Tutorials </a>

                <a class="navbar-item"> Practice </a>

              </div>

            </div>

          </div>
 
          <!-- Navbar End containing Sign Up and Sign In Buttons -->

          <div class="navbar-end">

            <div class="navbar-item">

              <div class="buttons">

                <a class="button is-success">

                  <strong>Sign up</strong>

                </a>

                <a class="button is-light"> Log in </a>

              </div>

            </div>

          </div>

        </div>

      </nav>

    </div>

  </body>

</html>

Output:

Reference Link: https://bulma.io/documentation/components/navbar/

Article Tags :

CSS

Web Technologies

Bulma

Bulma-Components