Bootstrap - Navs

Bootstrap 5’s Navs component provides versatile, responsive navigation solutions for your website, making it easier to create navigation bars, tabs, and pills with minimal code. In this guide, we’ll explore the various types of navs available in Bootstrap 5 and how to use them effectively in your projects.

1. Basic Navs

The nav component in Bootstrap is a simple list of links. It’s styled to look good right out of the box and can be customized further.

Basic Example

</li>

<a class="nav-link" href="#">About</a>

</li>

<a class="nav-link" href="#">Services</a>

</li>

<a class="nav-link" href="#">Contact</a>

</li>

</ul>

.nav: The base class for Bootstrap navigation.

.nav-item: A container for each item.

.nav-link: Used to style each link.

2. Tabs Navigation

Tabs are useful when you want to display different content sections within a single layout.

Example of Tabs

<a class="nav-link active" aria-current="page" href="#">Active</a>

</li>

</li>

<a class="nav-link" href="#">Another Link</a>

</li>

<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

</li>

</ul>

In this example:

.nav-tabs: Creates a tabbed interface.

.active: Highlights the active tab.

.disabled: Disables a tab.

3. Pills Navigation

Pills navigation is similar to tabs but with a rounded style that looks more like buttons.

Example of Pills

</li>

<a class="nav-link" href="#">Profile</a>

</li>

<a class="nav-link" href="#">Messages</a>

</li>

</ul>

Here:

.nav-pills: Applies a pill style to the nav links.

.active: Highlights the active pill.

4. Vertical Navs

To stack nav items vertically, simply add .flex-column to the nav list.

Vertical Example

<a class="nav-link active" href="#">Active</a>

</li>

</li>

<a class="nav-link" href="#">Another Link</a>

</li>

</ul>

Adding .flex-column will display the items vertically, which is useful for sidebars and other navigation menus.

5. Navs with Dropdowns

Dropdowns within navs are easy to create in Bootstrap 5. Just use the .dropdown class and include the necessary dropdown structure.

Dropdown Example

</li>

<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>

<li><a class="dropdown-item" href="#">Action</a></li>

<li><a class="dropdown-item" href="#">Another action</a></li>

<li><a class="dropdown-item" href="#">Something else here</a></li>

</ul>

</li>

</ul>

In this example:

.dropdown: Wraps the dropdown items.

.dropdown-toggle: Toggles the dropdown on click.

.dropdown-menu and .dropdown-item: Styles the dropdown items.

6. Justified Nav Links

Justified nav links distribute the items across the full width of the container. Use .nav-justified for this effect.

Justified Example

<a class="nav-link active" href="#">Active</a>

</li>

</li>

<a class="nav-link" href="#">Another Link</a>

</li>

</ul>

Adding .nav-justified makes each item span equally across the width of the parent container.

7. Responsive Navs

Bootstrap 5 navs are responsive by default. However, you can control the layout on different screen sizes by combining flex utility classes and breakpoint-based classes.

Responsive Example

</li>

<a class="nav-link" href="#">Profile</a>

</li>

<a class="nav-link" href="#">Messages</a>

</li>

</ul>

In this example:

.flex-column: Stacks the items vertically on smaller screens.

.flex-md-row: Arrange the items horizontally starting from medium screens and above.

Conclusion

Bootstrap 5 provides a flexible and powerful nav component that allows you to create clean, responsive navigation systems with ease. With options like tabs, pills, dropdowns, and vertical layouts, you can customize your navigation to suit any design need. Explore and experiment with these examples to create intuitive navigation menus in your web applications!