Open In App

Bulma Basic Navbar

Improve
Improve
Like Article
Like
Save
Share
Report

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 a horizontal navigation bar that has navbar items, buttons, dropdown menu, etc.

Bulma Navbar structure classes:

  • navbar: It is the main component.
  • navbar-brand: We can place the logo using this class.
  • navbar-burger: It is also called the hamburger icon in the left corner of the navbar.
  • navbar-menu: The right part of the screen is visible only in desktop mode.
  • navbar-item: Items in the navigation bar are shown using this class.
  • navbar-link: This class is used to set the links to other routes.
  • navbar-dropdown: This class is used to set the dropdown menu.
  • navbar-divider: This class is used to set the horizontal line that can separate the navbar items from each other.

Syntax:

<nav class="navbar">
    <div class="...">
        ...
    </div>
</nav>

Example 1: Suppose we want to create a navbar that has a logo in the left part and has some items, a dropdown menu then we can create using the above classes. The following code demonstrates a basic navigation bar using the navbar components classes.

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 Basic Navbar</b>
    <nav class="navbar"
         role="navigation" 
         aria-label="main navigation">
        <div class="navbar-brand">
          <a class="navbar-item" 
             href="https://www.geeksforgeeks.org/">
            <img src=
                 width="112" 
                 height="38">
          </a>
        </div>  
        <div  class="navbar-menu">
          <div class="navbar-start">
            <a class="navbar-item">
              Menu1
            </a>      
            <a class="navbar-item">
              Menu2
            </a>
            <a class="navbar-item">
                Menu3
            </a>
            <a class="navbar-item">
                Menu4
            </a>
            <a class="navbar-item">
                Menu5
            </a>
            <a class="navbar-item">
                Menu6
            </a>
        
            <div class="navbar-item has-dropdown is-hoverable">
              <a class="navbar-link">
                Dropdown
              </a>      
            </div>
          </div>
        </div>
    </nav>
</body>
</html>


Output:

Bulma Basic Navbar

Bulma Basic Navbar

Example 2: The following code demonstrates the navigation bar as shown in the above code along with the navbar-end class.

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 Basic Navbar</b>
    <nav class="navbar"
         role="navigation"
         aria-label="main navigation">
        <div class="navbar-brand">
          <a class="navbar-item" 
             href="https://www.geeksforgeeks.org/">
            <img src=
                 width="112"
                 height="38">
          </a>
        </div>  
        <div  class="navbar-menu">
          <div class="navbar-start">
            <a class="navbar-item">
              Menu1
            </a>      
            <a class="navbar-item">
              Menu2
            </a>
            <a class="navbar-item">
                Menu3
            </a>
            <a class="navbar-item">
                Menu4
            </a>
            <a class="navbar-item">
                Menu5
            </a>
            <a class="navbar-item">
                Menu6
            </a>
        
            <div class="navbar-item has-dropdown is-hoverable">
                <a class="navbar-link">
                  Dropdown
                </a>
          
                <div class="navbar-dropdown">
                  <a class="navbar-item">
                    Profile
                  </a>
                  <a class="navbar-item">
                    Messages
                  </a>
                  <a class="navbar-item">
                    Contact infpo
                  </a>
                </div>
              </div>
            </div>
        
          <div class="navbar-end">
            <div class="navbar-item">
              <div>
                <a class="button is-family-secondary">
                  <strong>Login</strong>
                </a>
                <a class="button is-primary">
                  <strong>Sign up</strong>
                </a>
              </div>
            </div>
          </div>
        </div>
    </nav>
</body>
</html>


Output:

Bulma Basic Navbar

Bulma Basic Navbar

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



Last Updated : 21 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads