Nav menus in Bootstrap 5

In bootstrap 5 nav menus are created to navigate through different web pages or locations. As these menus use links to navigate through different pages or locations. These menus increase the understandability of a website and make it easy for a user to move smoothly within different sections of a webpage. These menus are responsive which means that they collapse and expand according to the user’s screen size.

So, This article gives you detailed knowledge about  

• How to create a Basic Nav?
• What are the different BootStrap menu styles?

So, Today we are going to discuss different Nav menus (navigation menus) that a user can use according to its requirement to make a responsive design.

How To Create a Basic Nav?

The basic nav below is created using .nav class with <ul> tag and .nav-item wilt <li> tag:

But in bootstrap 5 we can use nav as an html tag <nav> with .nav class to get the same basic nav as shown above:

We can also change the horizontal or vertical alignment of the nav content as per design requirement.

Horizontal Alignment

• Start
• Center
• End

Start

To align nav content horizontally in the start, use “justify-content-start” class:

Center

To align nav content horizontally in the center, use “justify-content-center” class:

End

To align nav content horizontally in the end, use “justify-content-end” class:

Vertical Alignment
To align nav content vertically, use “flex-column” class:

This is how a nav menu is aligned vertically.

Bootstrap Menus Styles

Bootstrap menus are classified in two style categories:

• Tabs
• Pills

Tabs

To convert the nav menu into tabs just add the .nav nav-tabs class to your <nav> tag or <ul> tag.

Tabs using <nav> tag

This is how tabs using <nav> tag are created.

Tabs using <ul> tag

This is how tabs using <ul> tag are created.

Pills

To convert the nav menu into pills just add the .nav nav-pills class to your <nav> tag or <ul> tag.

Pills using <nav> tag

This is how pills using <nav> tag are created.

Pills using <ul> tag

This is how pills using <ul> tag are created. 

Tabs with dropdown menu using <nav> tag

To create tabs with dropdown menu using <nav> tag, use .dropdown class with .nav-item class and wrap it around an anchor tag which contains .nav-link, .dropdown-toggle classes along with data-bs-toggle=’’dropdown” attribute. Afterward wrap this anchor tag around <ul> tag which contain .dropdown-menu class, wrapped around <li> tag which contain anchor tag with the .dropdown-item class leading to dropdown menu items.

This is how tabs with the dropdown menu using <nav> tag are created.

Tabs with dropdown menu using <ul> tag

To create tabs with dropdown menu using <ul> tag, use .dropdown class with .nav-item class and wrap it around an anchor tag which contains .nav-link, .dropdown-toggle classes along with data-bs-toggle=’’dropdown” attribute. Afterward wrap this anchor tag around <ul> tag which contain .dropdown-menu class, wrapped around <li> tag which contain anchor tag with the .dropdown-item class leading to dropdown menu items.

This is how tabs with dropdown menus using <ul> tag are created. 

Pills with dropdown menu using <nav> tag

To create pills with dropdown menu using <nav> tag, use .dropdown class with .nav-item class and wrap it around an anchor tag which contains .nav-link, .dropdown-toggle classes along with data-bs-toggle=’’dropdown” attribute. Afterward wrap this anchor tag around <ul> tag which contain .dropdown-menu class, wrapped around <li> tag which contain anchor tag with the .dropdown-item class leading to dropdown menu items.

This is how pills with a dropdown menu using <nav> tag are created.

Pills with dropdown menu using <ul> tag

To create pills with dropdown menu using <nav> tag, use .dropdown class with .nav-item class and wrap it around an anchor tag which contains .nav-link, .dropdown-toggle classes along with data-bs-toggle=’’dropdown” attribute. Afterward wrap this anchor tag around <ul> tag which contain .dropdown-menu class, wrapped around <li> tag which contain anchor tag with the .dropdown-item class leading to dropdown menu items.

This is how pills with a dropdown menu using <ul> tag are created.

Vertical Pills

To create vertical pills just add a class .flex-column with .nav-pills class.

Fill and justify Tabs and Pills menu

.nav-fill class is used to fill spaces in unjustified manner while .nav-justified class is used to fill spaces in justified manner.

Tabs with .nav-fill
To fill the uncovered spaces of a container just add .nav-fill class with .nav nav-tabs. But the .nav-fill class only filled the spaces but didn’t justify them.

This is how tabs with .nav-fill are created.

Tabs with .nav-justified

.nav-justified class not only fills the ideal spaces but also distributes it equally among all the nav items.

This is how tabs with .nav-justified are created.

Pills with .nav-fill

To fill the uncovered spaces of a container just add a .nav-fill class with .nav nav-pills. But the .nav-fill class only filled the spaces but didn’t justify them.

This is how pills with .nav-fill are created.

Pills with .nav-justified

.nav-justified class not only fills the ideal spaces but also distributes it equally among all the nav items.

This is how pills with .nav-justified are created.

Conclusion

Nav menus are created using <ul> and <nav> tags and bootstrap classes .nav, .nav-items, .nav-link, .nav-tabs, .nav-pills. For the horizontal alignment “.justify-content-start/center/end” are used. For vertical alignment the “.flex-column” class is used. To fill the ideal spaces in a container, use “.nav-fill” and “.nav-justified” with “.nav-tabs” and “.nav-pills” classes. The above article contains knowledge regarding main and commonly used bootstrap 5 classes and tags to create nav menus.