In-page navigation menu

In-page navigation menu acts as a table of contents, helping users form a mental model of the site. It allows users to quickly discover all main sections within a single page and provide direct access to key needs. It is an effective way to guide users through informational and complex experiences without added interactive cost.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Navigation

Demo

Configure: select the dropdowns below to display the variety of options that an in-page navigation supports.

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
    
        

           Usage best practices
        

        








    
    
    



    
        

            

                
                    





    
    
    


Consider using in-page navigation menu when:


    

  • the site covers a large amount of topics with similar level of need for attention

  • the site's sole function is to provide practical information to the users in the simplest way possible




    






                
                    





    
    
    


Related components:






    






                
            

        

    
    
    




    
    
    



    
        

            

                
                    





    
    
    



    

        




    
    



    
    
        

           Do
        

        










    
        

            

                
                    





    
    
    



    

        
            
        

        
        Do
    









                
                    





    
    
    


Create and group menu items in a  way that is logical to your users.



    






                
                    





    
    
    



    

        
            
        

        
        Do
    









                
                    





    
    
    


Make group headings prominent and clear for scannability.