Prev Next

BS5 Navs

Bootstrap 5 Navs provide flexible and easy-to-use navigation components, including tabs, pills, and links.

Key Topics

Basic Navs

Create a basic navigation using the .nav class with .nav-link items.

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul>

Explanation: Use the .nav class for the container and .nav-item and .nav-link for individual items.

Tabs and Pills

Use .nav-tabs for tab-style navigation or .nav-pills for pill-style navigation.

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
</ul>

<ul class="nav nav-pills mt-3">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
</ul>

Explanation: The .nav-tabs and .nav-pills classes define the navigation's style as tabs or pills.

Vertical Nav

Add .flex-column to make the navigation vertical.

<ul class="nav flex-column">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
</ul>

Explanation: The .flex-column utility class transforms the navigation into a vertical layout.

Complete Nav Example

Here is a complete example demonstrating tabs, pills, and vertical navigation.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Navs Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2>Bootstrap Navs</h2>

        <h3>Basic Nav</h3>
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>

        <h3>Tabs and Pills</h3>
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#">Tab Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Tab Link</a>
            </li>
        </ul>
        <ul class="nav nav-pills mt-3">
            <li class="nav-item">
                <a class="nav-link active" href="#">Pill Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pill Link</a>
            </li>
        </ul>

        <h3>Vertical Nav</h3>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="#">Vertical Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Vertical Link</a>
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example demonstrates various navigation styles, including basic, tabbed, pill, and vertical navs.

Key Takeaways

  • Use .nav for a basic navigation container.
  • Add .nav-tabs or .nav-pills for styled navigation.
  • Apply .flex-column for vertical navigation.
Prev Next