Bootstrap 5 Navbar Responsive behaviors External content

The collapse plugin can be used to trigger a container element for content that structurally sits outside of the Bootstrap 5 Navbar. The Bootstrap plugin works on the id and data-bs-target matching, which means the value of the data-bs-target attribute in the navbar is the id the navbar will search which will collapse in itself.

Used attributes:

• data-bs-toggle: This attribute is used to signify which type of toggling will be done, the value should be "collapse".
• data-bs-target: This attribute is signify to add the target element will be toggled.

Syntax:

<div class="collapse" id="ExternalContent">
 <-- External Content -->
</div>
<nav class="navbar">
 <div class="">
 <button class="navbar-toggler" type="button" 
 data-bs-toggle="collapse" 
 data-bs-target="#ExternalContent">
 <span class="navbar-toggler-icon"></span>
 </button>
 </div>
</nav>

Example 1: The code example below demonstrates how we can add external nested nav content inside a responsive toggler navbar.

Output:

Example 2: The code below demonstrates that we can toggle external content where we can trigger an off-canvas from inside the navbar.

Output:

Reference:https://getbootstrap.com/docs/5.0/components/navbar/#external-content