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.
HTML
<!doctype html> < html lang = "en" > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 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" > w3wiki </ 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.
HTML
<!doctype html> < html lang = "en" > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < h1 class = "m-4 text-success" > w3wiki </ 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
Contact Us