Bulma Navbar Item

Last Updated : 16 Feb, 2022

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 navigation bar that has some items, links, buttons, etc. The navbar-item are the repeatable items that can be links, logos, dropdown menu, text, etc. The navbar-item class can be used with an anchor tag <a> or <div> tag.

Syntax:

<a class="navbar-item">
      <-- Navbar items -->
</a>

Example 1: When we want to create some navbar items using class navbar-item, refer to the following code.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Navbar items</title> 
    <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body> 
    <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> 
    <b class="is-size-4">Bulma Navbar items</b> 
    <div class="navbar-item"> 
        <a class="navbar-item">Home</a> 
        <a class="navbar-item">Menu</a> 
        <a class="navbar-item">Login</a>         
    </div> 
</body> 
</html> 

Output:

Example 2: When we want to create some items with a dropdown menu using class navbar-item and has-dropdown, refer to the following code.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Navbar items</title> 
    <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body> 
    <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> 
    <b class="is-size-4">Bulma Navbar items</b> 
    <div class="navbar-item has-dropdown"> 
        <a class="navbar-item">Home</a> 
        <a class="navbar-item">Menu</a> 
        <a class="navbar-item">Login</a> 
        <a class="navbar-link"> 
            GeeksforGeeks 
        </a> 
          
        <div class="navbar-dropdown"> 
            <-- dropdown items --> 
        </div> 
    </div> 
</body> 
</html> 