Bootstrap - Scrollspy Part 5: Advanced Scrollspy Features

Bootstrap Scrollspy can be integrated with other Bootstrap components like collapsible menus or dropdowns.

Examples and Explanation

Scrollspy with Collapsible Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar-example">

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">

        <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarNav">

        <ul class="navbar-nav">

            <li class="nav-item">

                <a class="nav-link" href="#section1">Section 1</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#section2">Section 2</a>

            </li>

        </ul>

    </div>

</nav>

Explanation: Combine Scrollspy with a collapsible navbar for responsive navigation.

Scrollspy with Dropdowns

<div class="dropdown">

    <a class="dropdown-toggle nav-link" href="#" role="button" data-bs-toggle="dropdown">Menu</a>

    <ul class="dropdown-menu">

        <li><a class="dropdown-item" href="#section1">Section 1</a></li>

        <li><a class="dropdown-item" href="#section2">Section 2</a></li>

    </ul>

</div>

Explanation: Dropdown menus can also be used with Scrollspy for multi-level navigation.

Nested Scrollspy

<div class="nested-scrollspy">

    <ul class="nav">

        <li><a href="#sub-section1">Sub-section 1</a></li>

        <li><a href="#sub-section2">Sub-section 2</a></li>

    </ul>

</div>

Explanation: Nested Scrollspy tracks subsections within larger sections.

Conclusion

Bootstrap 5 Scrollspy is a powerful feature for improving navigation on single-page websites. From basic setups to advanced customizations and integrations, Scrollspy ensures users can easily track their position on the page and navigate effectively. Understanding its functionality allows developers to build user-friendly and interactive web experiences.