Open In App

Design a Vertical and Horizontal menu using Pure CSS

Last Updated : 22 Feb, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

Menu is a very important component in any website. It is a user interface element within a webpage that contains links to other sections of the website. It can be displayed horizontally or vertically before the main content of the webpage or header.

  1. For Creating Vertical Menu:

    1. Menus are vertical by default in Pure CSS. It is easy to customize because of minimal default styling and low-specificity selectors.
    2. All the components of menu should be enclosed within a division with class named “pure-menu”.
    3.  Add class “pure-menu-heading” in the <span> element for the main heading or title.
    4.  Then add all the items after heading inside <ul> element with class “pure-menu-list”. Each item should be enclosed within <li> element with class “pure-menu-item” .
    5.  If you want to link an item with a section of your webpage you can further enclosed it within <a> element with class “pure-menu-link”.

    Example:

    HTML




    <!DOCTYPE html>
    <html>
      
    <head>
      
        <!--Import Pure Css files-->
        <link rel="stylesheet" href=
    "https://unpkg.com/purecss@1.0.0/build/pure-min.css"
            integrity=
    "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
            crossorigin="anonymous">
      
        <!-- Let browser know website is 
            optimized for mobile -->
            <meta name="viewport" content= 
            "width=device-width, initial-scale=1.0" />    
      
    </head>
      
    <body>
      
        <div class="pure-menu">
      
            <!--Main heading of menu-->
            <span class="pure-menu-heading">
                GEEKFORGEEKS
            </span>
      
            <ul class="pure-menu-list">
                  
                <!--List items of menu-->
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        Home
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        About Us
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        Contact
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="#" class="pure-menu-link">
                        Privacy Policy
                    </a>
                </li>
                  
      
            </ul>
        </div>
      
    </body>
      
    </html>
    		 

    

    

    
                        
    

    

    

    

    

    Output:
    

    2. 

  2. 

    For creating Horizontal Menu:
    

    You can change the above vertical menu to horizontal menu by just adding the class name “pure-menu-horizontal” in the division at the beginning.
    

    Example:
    

    

    HTML
    

    


    

    

    

    

    
                                    
    

    

                                        
    
                                    
    

    

                                        
    

    

                                        
    
                                    
    
                                    
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      
    

    <head> 
    

      
    

        <!--Import Pure Css files-->
    

        <link rel="stylesheet" href= 
    

    "https://unpkg.com/purecss@1.0.0/build/pure-min.css"
    

            integrity= 
    

    "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
    

            crossorigin="anonymous"> 
    

      
    

        <!-- Let browser know website is  
    

            optimized for mobile -->
    

            <meta name="viewport" content=  
    

            "width=device-width, initial-scale=1.0" />     
    

      
    

    </head> 
    

      
    

    <body> 
    

      
    

        <div class="pure-menu pure-menu-horizontal"> 
    

      
    

            <!--Main heading of menu-->
    

            <span class="pure-menu-heading"> 
    

                GEEKFORGEEKS 
    

            </span> 
    

      
    

            <ul class="pure-menu-list"> 
    

      
    

                <!--List items of menu-->
    

                <li class="pure-menu-item"> 
    

                    <a href="#" class="pure-menu-link"> 
    

                        Home 
    

                    </a> 
    

                </li> 
    

                <li class="pure-menu-item"> 
    

                    <a href="#" class="pure-menu-link"> 
    

                        About Us 
    

                    </a> 
    

                </li> 
    

                <li class="pure-menu-item"> 
    

                    <a href="#" class="pure-menu-link"> 
    

                        Contact 
    

                    </a> 
    

                </li> 
    

                <li class="pure-menu-item"> 
    

                    <a href="#" class="pure-menu-link"> 
    

                        Privacy Policy 
    

                    </a> 
    

                </li> 
    

                  
    

      
    

            </ul> 
    

        </div> 
    

      
    

    </body> 
    

      
    

    </html>
    

    
    		

    
    

    

    

    

    

    

    
                        
    

    

    

    
                        
    

    

    

    

    

    Output:
    

    3. 



                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        How to put the text inside of a created icon?
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        How to create fullscreen search bar using HTML , CSS and JavaScript ?
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Pure CSS Responsive Horizontal-to-Vertical Menu Layout
            

        
    
        
            

                Pure CSS Horizontal Menu
            

        
    
        
            

                Pure CSS Responsive Horizontal-to-Scrollable Menu Layout
            

        
    
        
            

                Pure CSS Scrollable Horizontal Menu
            

        
    
        
            

                Pure CSS Vertical Menu with Submenus
            

        
    
        
            

                Pure CSS Scrollable Vertical Menu
            

        
    
        
            

                Foundation CSS Menu Vertical Menu
            

        
    
        
            

                How to design a dropdown menu using pure CSS ?
            

        
    
        
            

                Pure CSS Table with Horizontal Borders
            

        
    
        
            

                How to Create Scrollable Horizontal Menu using CSS ?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
A

        

            
        

        

                                    


                                    

                                        ankushingle8523                                

                            

                            

            
                                

                            

                                                                    

                                        
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