In Bootstrap 5, navs are components used to create navigation menus or tabs for navigating between different sections or pages. Navs provide a convenient way to organize and structure navigation elements in a responsive and visually appealing manner. Here's an example of how to create basic navs in Bootstrap 5:

html
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <h4>Home Content</h4>
        <p>This is the content for the Home tab.</p>
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <h4>Profile Content</h4>
        <p>This is the content for the Profile tab.</p>
    </div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
        <h4>Contact Content</h4>
        <p>This is the content for the Contact tab.</p>
    </div>
</div>

In this example, we have a navigation menu with tabs. The `<ul>` element with the classes `nav` and `nav-tabs` represents the navigation container. Each navigation item is defined using the `<li>` element with the class `nav-item`. The actual tab links are created using `<a>` elements with the class `nav-link`. The `data-bs-toggle="tab"` attribute specifies the toggle behavior, and the `href` attribute points to the corresponding content section.

The content for each tab is placed within `<div>` elements with the class `tab-pane`. Each tab content section is identified by a unique `id` and is associated with its corresponding tab link using the `aria-labelledby` attribute.

By default, the first tab link and its associated content section are marked as active. You can modify the active tab by adding the `active` class to the corresponding tab link and `show active` classes to the corresponding tab content section.

You can customize the appearance of navs by adding additional classes, such as `nav-pills` for pill-style navigation, or `nav-fill` to distribute the nav items across the container's width evenly.

Bootstrap 5 also provides options for vertical and justified navs, along with the ability to handle events and add dynamic functionality using JavaScript.

Please refer to the Bootstrap documentation for more details and examples on working with navs in Bootstrap 5.

About the Author

Silan Software

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc