Bootstrap provides several options for creating navigation menus, like tabbed and vertical pills. To create this kind of navigation menus in Bootstrap, we can use the built-in classes and components offered by the framework. This aids in creating a stylish and functional navigation menu that works well on all devices.

Method - 1: Tabbed Navigation

In this type of menus each tab represents a different section of the website. The pills are arranged horizontally. Whenever a tab is clicked, the corresponding section gets displayed.

Algorithm

• Load Bootstrap’s CSS and JavaScript files.

• Add a container element with the heading "Tutorialspoint".

• Create a navigation menu with 3 tabs.

• Declare each tab.

• Add some content to each tab.

• Load the Bootstrap JavaScript and jQuery files.

Example

      
   
  
Tutorialspoint
  
  
 Home 
  
 Profile 
  
 Contact 
 
  
  
 
Home
 
Lorem ipsum dolor sit amet.
 
  
 
Profile
 
Lorem ipsum dolor sit amet.
 
  
 
Contact
 
Lorem ipsum dolor sit amet.
 
 
 
      

Method - 2: Vertical Pill Navigation

Vertical tabs, on the other hand, are a type of navigation menu where links are arranged vertically instead of horizontally. This helps create a smooth user experience.

Algorithm

• Create a container with the title "Tutorialspoint".

• The container should have one row and two columns.

• The first column contains the vertical navigation menu, while the second column displays the content of the selected menu item.

• Menus are created using the "nav" and "nav-pill" classes, which cause menu items to be displayed in a pill-like vertical style.

• Each item is an anchor tag with a unique "href" that links to a "tab panel" that displays the corresponding content.

• The content of each menu is displayed in a "tab pane" wrapped in a "tab content" class.

• The JavaScript code includes the jQuery library and some Bootstrap JavaScript plugins to make the menu work.

Example

             
  
 
Tutorialspoint
 
 
  
 Home Profile Messages Settings 
 
 
  
  
 
Home
 
Welcome to the home page!
 
  
 
Profile
 
Lorem ipsum dolor.
 
  
 
Messages
 
Lorem ipsum dolor.
 
  
 
Settings
 
Lorem ipsum dolor.
 
 
 
 
 
      

in conclusion

These types of menus can enhance the user interface and user experience of your website.

Some of the alternate ways of implementation includes,

• Create a custom menu using custom CSS and javascript functions.

• In addition to Bootstrap, CSS frameworks like Materialize and Bulma provide similar functionality.

• We can also use some third-party libraries, such as jQuery UI, UIkit and Semantic UI to create this kind of navigation menu.

The above is the detailed content of Create tabbed pill and vertical pill navigation menus in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!