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.
<!doctype html> < html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" >
</ script >
< script >
$(function(){
$('#work').on('activate.bs.scrollspy')
});
</ script >
</ head >
< body class = "m-3" >
< nav class = "navbar navbar-dark bg-dark" >
< div class = "container-fluid" >
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = ".nav-col" aria-controls = "navbarToggleExternalContent"
aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" ></ span >
</ button >
< nav class="collapse container-fluid navbar
navbar-expand-sm navbar-dark bg-dark nav-col"
id = "scrollspy" >
< a class = "nav-link active" href = "#dataStructs" >
Data Structures</ a >
< a class = "nav-link" href = "#algo" >
Algorithms</ a >
< nav class = "navbar" id = "scrollspy" >
< div class = "dropdown" >
< button class="btn btn-primary
dropdown-toggle ms-4 my-1"
type = "button" id = "dropdownMenuButton1" data-bs-toggle = "dropdown" aria-expanded = "false" href = "#other" >
Nested Navbar
</ button >
< ul class = "dropdown-menu bg-dark" aria-labelledby = "dropdownMenuButton1" >
< nav class="navbar navbar-expand-sm
navbar-dark bg-dark" id = "scrollspy" >
< a class = "nav-link ms-3 my-1" href = "#bootstrap" >
Bootstrap
</ a >
< a class = "nav-link ms-3 my-1" href = "#cpp" >
C++
</ a >
</ nav >
</ ul >
</ div >
</ nav >
</ nav >
</ div >
</ nav >
< h1 class = "ms-5 text-success" >
GeeksforGeeks
</ h1 >
< h4 class = "ms-5" >
Bootstrap 5 Navbar Responsive behaviors External content
</ h4 >
< div class = "container-fluid p-5 pt-2" data-spy = "scroll" data-target = "#scrollspy" data-offset = "50" >
< div class = "" >
< div id = "dataStructs" >
< h2 >Data Structures</ h2 >
< p >
A data structure is a group of data elements
that provides the easiest way to store and
perform different actions on the data of the
computer. A data structure is a particular
way of organizing data in a computer so that
it can be used effectively. The idea is to
reduce the space and time complexities of
different tasks. The choice of a good data
structure makes it possible to perform a
variety of critical operations effectively.
An efficient data structure also uses minimum
memory space and execution time to process
the structure.
</ p >
</ div >
< div id = "algo" >
< h2 >Algorithms</ h2 >
< p >
The word Algorithm means ”A set of finite
rules or instructions to be followed in
calculations or other problem-solving operations
” Or ” A procedure for solving a mathematical
problem in a finite number of steps that
frequently involves recursive operations”.
It can be understood by taking the example of
cooking a new recipe. To cook a new recipe,
one reads the instructions and steps and
executes them one by one, in the given sequence.
The result thus obtained is the new dish is
cooked perfectly. Every time you use your phone,
computer, laptop, or calculator you are using
Algorithms.
</ p >
</ div >
< div id = "other" >
< h1 >Others</ h1 >
</ div >
< div id = "bootstrap" >
< h2 >Bootstrap</ h2 >
< p >
Bootstrap is a free and open-source collection of CSS
and JavaScript/jQuery code used for creating dynamic
websites layout and web applications. Bootstrap
is one of the most popular front-end frameworks
which has really a nice set of predefined CSS codes.
Bootstrap uses different types of classes to make
responsive websites. Bootstrap 5 was officially
released on 16 June 2020 after several months of
redefining its features.Bootstrap is a framework
that is suitable for mobile-friendly web development.
it means the code and the template available on
bootstrap are applicable to various screen sizes.
It is responsive for every screen size. </ p >
</ div >
< div id = "cpp" >
< h2 >C++</ h2 >
< p >
C++ is a general-purpose programming language
and is widely used nowadays for competitive
programming. It has imperative, object-oriented
and generic programming features. C++ runs on
lots of platforms like Windows, Linux, Unix,
Mac etc.C++ is a general-purpose programming
language that was developed as an enhancement
of the C language to include object-oriented
paradigm. It is an imperative and a compiled
language. C++ is a middle-level language
rendering it the advantage of programming
low-level (drivers, kernels) and even higher-
level applications (games, GUI, desktop apps
etc.). The basic syntax and code structure
of both C and C++ are the same.
</ p >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: The code below demonstrates that we can toggle external content where we can trigger an off-canvas from inside the navbar.
<!doctype html> < html lang = "en" >
< head >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" >
</ script >
</ head >
< body >
< h1 class = "m-4 text-success" >
GeeksforGeeks
</ h1 >
< h4 class = "m-4" >Bootstrap 5 Navbar
Responsive behaviors External content
</ h4 >
< div class = "collapse container" id = "navbarToggleExternalContent" >
< div class = "bg-dark p-4" >
< button class = "btn btn-success" type = "button" data-bs-toggle = "offcanvas" data-bs-target = "#offcanvasWithBackdrop" aria-controls = "offcanvasWithBackdrop" >
Open Default Offcanvas
</ button >
</ div >
</ div >
< div class = "offcanvas offcanvas-start" tabindex = "-1" id = "offcanvasWithBackdrop" aria-labelledby = "offcanvasWithBackdropLabel" >
< div class = "offcanvas-header" >
< h5 class = "offcanvas-title" id = "offcanvasScrollingLabel" >
This is an offcanvas
</ h5 >
< button type = "button" class = "btn-close text-reset" data-bs-dismiss = "offcanvas" aria-label = "Close" >
</ button >
</ div >
</ div >
< div class = "container" >
< nav class = "navbar navbar-dark bg-dark" >
< div class = "container-fluid" >
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarToggleExternalContent" aria-controls = "navbarToggleExternalContent"
aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" ></ span >
</ button >
</ div >
</ nav >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/navbar/#external-content