Bootstrap 5 Navbar Responsive behaviors Toggler

Bootstrap 5 Navbar has an amazing feature that makes it very innovatively responsive to different screen and viewport sizes which is its transformation into the Toggler. The elements' visibility in the navbar can be toggled with the use of a toggler in the Navbar. To control when their information collapses behind a button, navigation bars use the classes .navbar-toggler,.navbar-collapse, and .navbar-expand[-sm|-md|-lg|-xl|-xxl]. Also, the screen size or viewport size at which the contents will be hidden is completely customizable. 

Bootstrap 5 Navbar Responsive behaviors Toggler Syntax:

<nav class="navbar">
 <button class="navbar-toggler" type="button" 
 data-bs-toggle="collapse" 
 data-bs-target="#navbarToggle">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse" id="navbarToggle">
 <!-- Navbar Content Goes Here --!>
 </div>
</nav>

Bootstrap 5 Navbar Responsive behaviors Toggler Used Classes:

• navbar-toggler: Used to determine which button exactly is used as the toggler to toggle the navbar when the viewport precedes the predetermined size.
• collapse: Used to add the Collapse functionality to the navbar which adds the feature to expand and collapse.

Example 1: The code below demonstrates how we can add a Responsive behaviors Toggler in a Navbar with a dropdown:

Output:

Example 2: The code below demonstrates how we can add Responsive behaviors Toggler in a Navbar which has Scrollspy:

Output:

Reference: https://getbootstrap.com/docs/5.0/components/navbar/#toggler