Bulma Navbar

Follow the following steps to create a Bulma CSS navbar menu

dropdown - It is a main container for the dropdown.
dropdown-trigger - It is a container for the dropdown button.
dropdown-menu It is a toggleable menu that is hidden by default.
dropdown: It is the main container for the dropdown.
- dropdown-content - It is a dropdown box having a white background with shadow.
- dropdown-item - It is a single item of the dropdown list that will be either <a> or <div>.
- dropdown-divider -It is a horizontal line that is used to separate dropdown items.

Example

General Syntax

      
        <nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a
      class="navbar-item"
      href="https://sudhakarinfotech.com">
      <img src="../images/logo.png" width="35" height="28" alt="Brand Logo">
    </a>

    <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>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item"> Home </a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link"> Services </a>

        <div class="navbar-dropdown">
          <a class="navbar-item"> Web Design </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light"> Log in </a>
        </div>
      </div>
    </div>
  </div>
</nav>

Try it now

Navbar brand

The navbar is placed in the left direction of the navbar. It can contain:

A number of navbar-item.
The navbar-burger as last-child.

Example

On the desktop >=1024, the navbar brand will only take up the space it needs.

General Syntax

      
        <nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- navbar items, navbar burger... -->
  </div>
</nav>

Try it now

Code Explanation

The navbar brand is shown on the both touch devices < 1024px and desktop >=1024px.Always use a few navbar items to avoid the horizontal overflow on the small devices.

Navbar Hamburger Menu

It is also known as the hamburger menu that only appears on touch devices. It is the last child of the navbar-brand. It also contained three empty span tags in order to visualize the hamburger lines or the cross(when active).

General Syntax

      
        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>

Try it now

Code Explanation

You can add the modifier class is-active to turn it into a cross.

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4