Skip to content
Related Articles

Related Articles

Bulma Navbar Menu

Improve Article
Save Article
  • Last Updated : 20 Feb, 2022
Improve Article
Save Article

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.

Navbar is the horizontal bar that has items, links, buttons, etc. It has a navbar menu that consists of menu items. It is the sibling of the navbar brand. The navbar menu is invisible in touch devices lesser than 1024 px. If we want to show this menu on touch devices too then we need to add an is-active class.

Bulma Navbar Menu Classes:

  • navbar-menu: This is the class used to set the navigation bar menu.
  • navbar-brand: This is the class used to set the navigation bar logo.
  • navbar-start: This is the class used to set the start or left part of the navigation bar.
  • navbar-end: This is the class used to set the end or right part of the navigation bar.

Syntax:

<nav class="navbar"> 
  <div class="navbar-menu-class">
    <!-- menu items -->
  </div>
</nav>

For touch devices or mobile devices:

<div class="navbar-menu is-active">
  <!-- visible in mobile devices too -->
</div>

Example 1: Suppose we want to create a navbar menu with some items and a logo, then we can easily use the navbar-brand class (for logo) and navbar-menu. The navbar-menu is divided into two parts i.e navbar-start and navbar-end. The navbar-start is the left part of the navbar-menu and the navbar-end is the right part of the menu.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Navbar Basic</title>
    <link rel='stylesheet' href=
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
    <b class="is-size-4">Bulma Navbar Menu </b>
    <nav class="navbar" role="navigation"
         aria-label="main navigation">
        <div class="navbar-brand">
  
          <!-- navbar items and navbar burger... -->
          <a class="navbar-item" 
             href="https://www.geeksforgeeks.org/">
              <img src=
               width="112" height="28" alt="GFG">
          </a>          
        </div>
        <div class="navbar-menu">
          <!-- navbar start, navbar end -->
          <div class="navbar-start">
              <a class="navbar-item" >Item1</a>
              <a class="navbar-item" >Item2</a>
              <a class="navbar-item" >Item3</a>
              <a class="navbar-item" >Item4</a>
              <a class="navbar-item" >Item5</a>
          </div>
          <div class="navbar-end">
            <a class="navbar-item" >Item5</a>
            <a class="navbar-item" >Item6</a>
            <a class="navbar-item" >Item7</a>            
          </div>
        </div>
    </nav>
</body>
</html>


Output:

Bulma Navbar Menu

Example 2: When we want to show this navbar menu on touch devices or mobile devices whose screen size is small then use the is-active modifier class in the navbar-menu div.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Navbar Basic</title>
    <link rel='stylesheet' href=
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
         GeeksforGeeks
    </h1>
    <b class="is-size-4">Bulma Navbar Menu </b>
    <nav class="navbar" role="navigation" 
         aria-label="main navigation">
        <div class="navbar-brand">
  
          <!-- navbar items and navbar burger... -->
          <a class="navbar-item" href="https://www.geeksforgeeks.org/">
            <img src=
              width="112" height="28" alt="GFG">
          </a>          
        </div>
        <!--  show content in mobile devices using is-active class-->
        <div class="navbar-menu is-active">  
          <!-- navbar start, navbar end -->
          <div class="navbar-start">
          <a class="navbar-item" >GFG1</a>
          <a class="navbar-item" >GFG2</a>
          <a class="navbar-item" >GFG3</a>
          <a class="navbar-item" >GFG4</a>
          <a class="navbar-item" >GFG5</a>
          <a class="navbar-item" >GFG6</a>
          </div>
        </div>
    </nav>
</body>
</html>


Output:

Bulma Navbar Menu

using is-active modifier class

Reference link: https://bulma.io/documentation/components/navbar/#navbar-menu


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!