Lesson 20: 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:

1. Link
2. Link
3. Link
4. Disabled

For example:

 Bootstrap Example 

Nav

Basic horizontal menu for QuanTriMang.com:

1. Link
2. Link
3. Link
4. Disabled

 

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):

1. Link
2. Link
3. Link
4. Disabled

Navigation menu in the middle:

1. Link
2. Link
3. Link
4. Disabled

Right-hand navigation menu:

1. Link
2. Link
3. Link
4. Disabled

 

Vertical navigation menu

Add a class .flex-columnto create vertical navigation. Basic code:

For example:

 Bootstrap Example 

Vertical navigation for TipsMake.com.com

1. Link
2. Link
3. Link
4. Disabled

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:

1. Active
2. Link
3. Link
4. Disabled

 

For example:

 Bootstrap Example 

Navigation tab for QuanTriMang.com

1. Active
2. Link
3. Link
4. Disabled

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:

1. Active
2. Link
3. Link
4. Disabled

For example:

 Bootstrap Example 

Navigation buttons for QuanTriMang.com

1. Active
2. Link
3. Link
4. Disabled

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:

1. Active
2. Link
3. Link
4. Disabled

Align all tabs:

1. Active
2. Link
3. Link
4. Disabled

Pill with dropdown menu

Sample code:

1. Active
2. Dropdown
   1. Link 1
   2. Link 2
   3. Link 3
3. Link
4. Disabled

For example:

 Bootstrap Example 

Tab-based buttons with dropdown menus for QTM

1. Active
2. Dropdown menu
   1. Link 1
   2. Link 2
   3. Link 3
3. Link
4. Disabled

 

Tabs with dropdown menus

Sample code:

1. Active
2. Dropdown
   1. Link 1
   2. Link 2
   3. Link 3
3. Link
4. Disabled

For example:

 Bootstrap Example 

Tab with dropdown menu for QuanTriMang.com

1. Active
2. Dropdown
   1. Link 1
   2. Link 2
   3. Link 3
3. Link
4. Disabled

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:

1. Gate
2. Menu 1
3. Menu 2

  . . . 

For example:

 Bootstrap Example 

Tabs can be switched for QuanTriMang.com

1. Homepage
2. Life
3. Technology

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"` :

1. Gate
2. Menu 1
3. Menu 2

  . . . 

For example:

 Bootstrap Example 

Pill can be converted for QuanTriMang.com

1. Gate
2. Menu 1
3. Menu 2

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?