Open In App

Bulma Navbar Helper Classes

Last Updated : 14 Feb, 2022
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. The two types of navbar helper classes are spacing and shading and both are discussed are below with their examples.

Bulma Navbar helper classes:

  • is-spaced: This class is used to add padding in the navbar component. It sets the padding of the navbar from top and bottom with 1rem and in left and right with 2rem sizes.
  • has-shadow: This class is used to add a shadow around the navbar component.

Syntax:

<nav class="navbar is-spaced">
    ...
</nav>

Example 1: Below example illustrates the Navbar is-spaced helper class. Notice the space around the navbar component in the output.

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 is-spaced"
        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:




Example 2: Below example illustrates the Navbar has-shadow helper class.






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 has-shadow"


        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: https://bulma.io/documentation/components/navbar/#navbar-helper-classes


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bulma Pagination Sizes
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bulma Unselectable
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bulma Navbar start and navbar end
            

        
    
        
            

                Bulma Navbar Colors
            

        
    
        
            

                Bulma Transparent Navbar
            

        
    
        
            

                Bulma Fixed navbar
            

        
    
        
            

                Bulma Hero Fullheight with Navbar
            

        
    
        
            

                Bulma Navbar
            

        
    
        
            

                Bulma Navbar Burger
            

        
    
        
            

                Bulma Navbar Brand
            

        
    
        
            

                Bulma Basic Navbar
            

        
    
        
            

                Bulma Navbar Item
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        tarunsinghwap7                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox