Navs in Bootstrap 5 are a component that helps you design navigation on websites, applications, or software. Below is how to use Navs in Bootstrap 5.
Navs in Bootstrap 5 are a component that helps you design navigation on websites, applications, or software. Below is how to use Navs in Bootstrap 5 .
Navigation menu
If you want to create a simple horizontal menu, add a class .nav to the element, followed by a class .nav-itemfor each element.
and add classes .nav-linkto their links. Basic code:
For example:
Bootstrap Example Nav
Basic horizontal menu for QuanTriMang.com:
Adjust navigation menu
Add classes .justify-content-centerto adjust the navigation menu to be centered and class .justify-content-endto adjust it to be on the right. Basic code:
For example:
Bootstrap Example Nav for TipsMake.com.com in Bootstrap
Left-hand navigation menu (default):
Navigation menu in the middle:
Right-hand navigation menu:
Vertical navigation menu
Add a class .flex-columnto create vertical navigation. Basic code:
For example:
Bootstrap Example Vertical navigation for TipsMake.com.com
Tab
Transform the nav menu into navigation tabs using the class .nav-tabs. Add the class .activeto the active/current link. If you want the tabs to be switchable, try applying the basic code below:
For example:
Bootstrap Example Navigation tab for QuanTriMang.com
Pills
Transform the navigation menu into navigation pills (similar to buttons) using the `` class .nav-pills. If you want to convert the pills, follow this basic code:
For example:
Bootstrap Example Navigation buttons for QuanTriMang.com
Align tab/pill
Align tabs/pills using the same class .nav-justified(same width):
. .
For example:
Bootstrap Example Align navigation tabs/pills for QuanTriMang.com
Use the `.nav-justified` class to align the button-based navigation menu:
Align all tabs:
Pill with dropdown menu
Sample code:
For example:
Bootstrap Example Tab-based buttons with dropdown menus for QTM
Tabs with dropdown menus
Sample code:
For example:
Bootstrap Example Tab with dropdown menu for QuanTriMang.com
Dynamic/Toggle tabs
To make tabs toggleable, add the attribute data-toggle="tab" to each link. Then, add a class .tab-panewith a unique ID for each tab and place them inside the element containing the class .tab-content.
If you want the tab to fade when clicked, add a class .fadeto it .tab-pane. Sample code:
. . . For example:
Bootstrap Example Tabs can be switched for QuanTriMang.com
HOME
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Menu 1
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Menu 2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Dynamic/Switchable Pill
You apply the same code template as above to the pill, just change the `data-toggle` property to `data-toggle="pill"` :
. . . For example:
Bootstrap Example Pill can be converted for QuanTriMang.com
Homepage
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Menu 1
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Menu 2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Above are all the ways to create a navigation menu using Bootstrap 5. As you can see, it's not too difficult, right?