An Offcanvas can be triggered or used using two ways using data attributes and using JavaScript. The data-attributes approach needs two attributes. These data attributes are added to the anchor link or button which is used to trigger the off-canvas. Offcanvas class is added to the div which is the off-canvas. container.
Bootstrap 5 Offcanvas Usage Data Attributes:
- data-bs-toggle: we need to add “offcanvas” as a value to this attribute.
- data-bs-target: We add the id/class(CSS selector) of the off-canvas container as a value to this attribute.
Syntax:
<button class="btn" type="button" data-bs-toggle="offcanvas" data-bs-target="id">... </button> <div class="offcanvas" id="..."> ... </div>
Example 1: The example below demonstrates how we can trigger the offcanvas using the data-attributes.
<!doctype html> < html lang = "en" >
< head >
<!-- Bootstrap CDN -->
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" >
</ script >
</ head >
< body class = "container" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< strong >
Bootstrap 5 Offcanvas Usage Via data attributes
</ strong >
< div class = "container" >
< button class = "btn btn-success" type = "button" data-bs-toggle = "offcanvas"
data-bs-target = "#offcanvasLeft" >
This button has those Data Attributes to use< br >
an Offcanvas Which is the default placed offcanvas
</ button >
</ div >
< div class = "offcanvas offcanvas-start" id = "offcanvasLeft" >
< div class = "offcanvas-header" >
< h5 class = "offcanvas-title" >
This is the Default offcanvas
Triggered with the data attributes.
</ h5 >
< button type = "button" class = "btn-close text-reset"
data-bs-dismiss = "offcanvas" aria-label = "Close" >
</ button >
</ div >
< div class = "offcanvas-body" >
< p >
This Offcanvas has the default
placement which is left.</ p >
< br >
< ul class = "list-group" >
< li class = "list-group-item" >An item</ li >
< li class = "list-group-item" >A second item</ li >
< li class = "list-group-item" >A third item</ li >
< li class = "list-group-item" >A fourth item</ li >
< li class = "list-group-item" >And a fifth one</ li >
</ ul >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: The example below demonstrates how we can trigger the offcanvas using the data-attributes in the button which triggers a top off-canvas using the offcanvas-top.
<!doctype html> < html lang = "en" >
< head >
<!-- Bootstrap CDN -->
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" >
</ script >
</ head >
< body class = "container" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< strong >
Bootstrap 5 Offcanvas Usage Via data attributes
</ strong >
< div class = "container" >
< button class = "btn btn-success"
type = "button"
data-bs-toggle = "offcanvas"
data-bs-target = "#offcanvasTop" >
This button has those Data Attributes to use< br >
an Offcanvas Which is the top placed offcanvas
</ button >
</ div >
< div class = "offcanvas offcanvas-top" id = "offcanvasTop" >
< div class = "offcanvas-header" >
< h5 class = "offcanvas-title" >
This is the Top offcanvas with Data Attributes</ h5 >
< button type = "button"
class = "btn-close text-reset"
data-bs-dismiss = "offcanvas"
aria-label = "Close" >
</ button >
</ div >
< div class = "offcanvas-body" >
< p >This offcanvas pops from the top when triggered</ p >
< br >
< img src =
alt = "" >
< button type = "button"
class = "btn-success"
data-bs-dismiss = "offcanvas"
aria-label = "Close" >Close
</ button >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#via-data-attributes