Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating responsive & dynamic websites layout and web applications. Offcanvas is one of the features of Bootstrap to make web pages more attractive, along with enhancing the user experience.
Offcanvas is a sidebar component that helps to toggle the view using Javascript, to appear from the left, right or bottom edge of the viewport. In order to toggle the view, the button can be used as the trigger, which is declared with the specific element, along with using the data attribute to utilize it for invoking the JavaScript. It is similar to the Bootstrap Modal, where only single offcanvas can be displayed at a time. Navigation throughout the page can be done using offcanvas functionality.
Offcanvas Component: Offcanvas contain a header with a close button and the body part. It’s good to include a close button or you can provide an explicit source to close it.
Syntax:
<div class="offcanvas offcanvas-start"
id="sidebar">
<div class="offcanvas-header">
<h1 class="offcanvas-title">
Heading
</h1>
<button type="button"
class="btn-close">
</button>
</div>
<div class="offcanvas-body">
<p>Content Body</p>
</div>
</div>Offcanvas Component Class:
- offcanvas: This class is used to create offcanvas but it hides the content.
- offcanvas show: This class is used to show the offcanvas content in the viewport.
- offcanvas-header: This class is used for the head section of offcanvas.
- offcanvas-body: This class is used to add content to the offcanvas body parts.
Example: This example describes the use of the Basic Offcanvas in Bootstrap.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<title>Bootstrap Offcanvas</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<div class="container mt-3">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasStart" aria-controls="offcanvasStart">
Toggle offcanvas
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasStart" aria-labelledby="offcanvasStartLabel">
<div class="offcanvas-header">
<h3 id="offcanvasStartLabel">
Offcanvas
</h3>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
</button>
</div>
<div class="offcanvas-body">
<h5>
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
</h5>
</div>
</div>
<center>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<h4>
A computer science portal for geeks.
</h4>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<h4>
A computer science portal for geeks.
</h4>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
</center>
</div>
</body>
</html>
|
Output:
Offcanvas Placement: The Offcanvas placement can be used to position the offcanvas in various ways, such as top, bottom, right, & start of the viewport. There is no default placement for offcanvas components.
Syntax:
<div class="offcanvas offcanvas-start"
id="offcanvasStart" >
</div>
<div class="offcanvas offcanvas-top"
id="offcanvasTop" >
</div>
<div class="offcanvas offcanvas-end"
id="offcanvasRight" >
</div>
<div class="offcanvas offcanvas-bottom"
id="offcanvasBottom">
</div>Offcanvas Placement Class:
- offcanvas-start: This class is used to place offcanvas on the left side of the viewport.
- offcanvas-end: This class is used to place offcanvas on the right side of the viewport.
- offcanvas-top: This class is used to place offcanvas on the top side of the viewport.
- offcanvas-bottom: This class is used to place offcanvas on the bottom side of the viewport.
Example: In this example, we will demonstrate offcanvas placement in the viewport.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<title>
Bootstrap Offcanvas
</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<div class="container mt-3">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasStart" aria-controls="offcanvasStart">
Toggle left offcanvas
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasStart" aria-labelledby="offcanvasStartLabel">
<div class="offcanvas-header">
<h3 id="offcanvasStartLabel">
Offcanvas left
</h3>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
</button>
</div>
<div class="offcanvas-body">
<h5>
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
</h5>
</div>
</div>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
Toggle right offcanvas
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h3 id="offcanvasRightLabel">
Offcanvas right
</h3>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
</button>
</div>
<div class="offcanvas-body">
<h5>
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
</h5>
</div>
</div>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
Toggle top offcanvas
</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h3 id="offcanvasTopLabel">
Offcanvas top
</h3>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
</button>
</div>
<div class="offcanvas-body">
<h5>
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
</h5>
</div>
</div>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">
Toggle bottom offcanvas
</button>
<div class="offcanvas offcanvas-bottom"
tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h3 class="offcanvas-title" id="offcanvasBottomLabel">
Offcanvas bottom
</h3>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
</button>
</div>
<div class="offcanvas-body small">
<h5>
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
</h5>
</div>
</div>
<br>
<center>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<h4>
A computer science portal for geeks.
</h4>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<h4>
A computer science portal for geeks.
</h4>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
</center>
</div>
</body>
</html>
|
Output:
Offcanvas Backdrop: The backdrop option specifies that the offcanvas have a dark overlay (the background color of the current page). By default the backdrop is active. Use the data-bs-backdrop attribute and set its value to false to inactive the backdrop.
Syntax:
<div class="offcanvas offcanvas-start"
data-bs-scroll="true"
data-bs-backdrop="false">
Content
</div>Example 1: In this example, we will demonstrate offcanvas with the default option. By default backdrop option is active and scrolling is inactive.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<title>Bootstrap Sidebar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar" aria-labelledby="offcanvasStartLabel">
<div class="offcanvas-header">
<h1 id="offcanvasStartLabel">
GeeksforGeeks
</h1>
<button type="button" class="btn-close text-reset"
data-bs-dismiss="offcanvas" aria-label="Close">
</button>
</div>
<div class="offcanvas-body">
<h5>
Scrolling is inactive (default)
</h5>
<h5>
backdrop is active (default)
</h5>
<br>
<h5>
<p>
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
</p>
</h5>
</div>
</div>
<div class="container mt-3">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="offcanvasStart">
Offcanvas Sidebar
</button>
<center>
<img src=
alt="GFG" width="600" height="400">
<br>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<h4>
A computer science portal for geeks.
</h4>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<h4>
A computer science portal for geeks.
</h4>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<br>
<img src=
alt="GFG" width="600" height="400">
<br>
</center>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will demonstrate offcanvas with an inactive backdrop. Use the data-bs-backdrop attribute and set its value to false to inactive the backdrop.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<title>Bootstrap Offcanvas</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<div class="offcanvas offcanvas-start" data-bs-backdrop="false" tabindex="-1" id="sidebar" aria-labelledby="offcanvasStartLabel">
<div class="offcanvas-header">
<h1 id="offcanvasStartLabel">
GeeksforGeeks
</h1>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
</button>
</div>
<div class="offcanvas-body">
<h5>
Scrolling is inactive (default)
</h5>
<h5>
backdrop is inactive
</h5>
<br>
<h5>
<p>
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
</p>
</h5>
</div>
</div>
<div class="container mt-3">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="offcanvasStart">
Offcanvas Sidebar
</button>
<center>
<img src=
alt="GFG"
width="600" height="400">
<br>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<h4>
A computer science portal for geeks.
</h4>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<h4>
A computer science portal for geeks.
</h4>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<br>
<img src=
alt="GFG"
width="600" height="400">
<br>
</center>
</div>
</body>
</html>
|
Output:
Background scrolling: It is by default inactive means background content is not scrollable. Use the data-bs-scroll attribute and set its value to true to activate the background scrolling.
Example 3: In this example, we will demonstrate offcanvas with scrolling and backdrop.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<title>Bootstrap Offcanvas</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="sidebar" aria-labelledby="offcanvasStartLabel">
<div class="offcanvas-header">
<h1 id="offcanvasStartLabel">
GeeksforGeeks
</h1>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
</button>
</div>
<div class="offcanvas-body">
<h5>
Scrolling is active
</h5>
<h5>
backdrop is active
</h5>
<br>
<h5>
<p>
Bootstrap is the most popular CSS Framework
for developing responsive and mobile-first
websites.
</p>
</h5>
</div>
</div>
<div class="container mt-3">
<button class="btn btn-primary"
type="button" data-bs-toggle="offcanvas"
data-bs-target="#sidebar" aria-controls="offcanvasStart">
Offcanvas Sidebar
</button>
<center>
<img src=
alt="GFG" width="600" height="400">
<br>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<h4>
A computer science portal for geeks.
</h4>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<h4>
A computer science portal for geeks.
</h4>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<br>
<img src=
alt="GFG"
width="600" height="400">
<br>
</center>
</div>
</body>
</html>
|
Output:
Offcanvas with Dropdown Menu: The Offcanvas facilitates the dropdown menu that contains the list of options that will be only revealed when a user interacts with the menu.
Syntax:
<div class="offcanvas-body>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="#">
element 1
</a>
</li>
<li>
<a class="dropdown-item"
href="#">element 2
</a>
</li>
</ul>
</div>Used Classes:
- dropdown-menu: This class is used to create a dropdown menu.
- dropdown-item: This class is used to list dropdown items.
Example: In this example, we will demonstrate offcanvas with the dropdown menu.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<title>Bootstrap Sidebar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<div class="container mt-3">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Offcanvas with dropdown menu
</button>
<div class="offcanvas offcanvas-start"
tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h1 class="offcanvas-title" id="offcanvasExampleLabel">
GeeksforGeeks
</h1>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
aria-label="Close">
</button>
</div>
<div class="offcanvas-body">
<div>
<h5>
Bootstrap is the most popular
CSS Framework for developing
responsive and mobile-first
websites.
</h5>
</div>
<br>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle"
type="button" id="dropdownMenuButton"
data-bs-toggle="dropdown">
Dropdown Menu
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>
<a class="dropdown-item" href="#">HTML
</a>
</li>
<li>
<a class="dropdown-item" href="#">CSS
</a>
</li>
<li>
<a class="dropdown-item" href="#">JAVASCRIPT
</a>
</li>
<li>
<a class="dropdown-item" href="#">BOOTSTRAP
</a>
</li>
</ul>
</div>
</div>
</div>
<br>
<center>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<h4>
A computer science portal for geeks.
</h4>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<h4>
A computer science portal for geeks.
</h4>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
</center>
</div>
</body>
</html>
|
Output:
Offcanvas with Vertical Menu: Offcanvas provides a vertical menu to choose from the options, that will be revealed when users interact with the menu.
Syntax:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"
href="#">
list Item 1
</a>
</li>
</ul>
Used Classes:
- navbar-nav: This class is used to create a vertical menu.
- nav-link: This class is used to add items to the vertical menu.
Example: In this example, we will demonstrate offcanvas with a vertical menu.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<title>Bootstrap Offcanvas</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<div class="container mt-3">
<div class="offcanvas offcanvas-start"
tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h1 class="offcanvas-title" id="offcanvasExampleLabel">
GeeksforGeeks
</h1>
<button type="button"
class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
</button>
</div>
<div class="offcanvas-body">
<h5>
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
</h5>
<br>
<nav class="navbar bg-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
Link 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link 2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link 3
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link 4
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Offcanvas with vertical menu
</button>
<br>
<center>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<h4>
A computer science portal for geeks.
</h4>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<h4>
A computer science portal for geeks.
</h4>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
</center>
</div>
</body>
</html>
|
Output:
Accessibility using Sass Variables:
Sass variables are the variable which are used instead of the attribute value. Here some sass variables are given by bootstrap model. you can use this variable to enhance the styling of offcanvas.
- $offcanvas-padding-y : $modal-inner-padding ;
- $offcanvas-padding-x : $modal-inner-padding ;
- $offcanvas-bg-color : $modal-content-bg ;
- $offcanvas-color : $modal-content-color ;
- $offcanvas-horizontal-width : 400px ;
- $offcanvas-border-color : $modal-content-border-color ;
- $offcanvas-border-width : $modal-content-border-width ;
- $offcanvas-box-shadow : $modal-content-box-shadow-xs ;
Offcanvas Usage:
- Via data attributes
Syntax:
<a class="btn btn-primary" data-bs-toggle="offcanvas" aria-controls="offcanvasStart"> </a>
Used Classes:
- offcanvas: This class is used to create offcanvas but it hides the content.
Via JavaScript:
Syntax:
var offcanvasElementList =
[].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList =
offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl) })-
Via Option:
- Backdrop: Its default value is true. You can see the effect of the backdrop on the body while offcanvas is open. As it is already shown in the above examples.
- Scroll: Its default value is false. You can allow body scrolling while offcanvas is open. As it is already shown in the above examples.
-
Via Events:
- show.bs.offcanvas: This event fires immediately when the show instance method is called.
- shown.bs.offcanvas: This event is fired when an offcanvas element has been made visible to the user.
- hide.bs.offcanvas: This event is fired immediately when the hide method has been called.
- hidden.bs.offcanvas: This event is fired when an offcanvas element has been hidden from the user.
-
Via Method:
- toggle(): This method toggles an offcanvas element to be shown or hidden. Returns to the caller before the offcanvas element has actually been shown or hidden.
- show(): This method shows an offcanvas element. Returns to the caller before the offcanvas element has actually been shown.
- Hide(): Hides an offcanvas element. Returns to the caller before the offcanvas element has actually been hidden.
Example: In this example, we will demonstrate usage of offcanvas from href attribute and data-bs-target attribute.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<title>Bootstrap Offcanvas</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<div class="container mt-3">
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasStart" role="button" aria-controls="offcanvasStart">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasStart" aria-controls="offcanvasStart">
Button with data-bs-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasStart" aria-labelledby="offcanvasStartLabel">
<div class="offcanvas-header">
<h1 id="offcanvasStartLabel">
GeeksforGeeks
</h1>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
</button>
</div>
<div class="offcanvas-body">
<h5>
Bootstrap is the most popular
CSS Framework for developing
responsive and mobile-first
websites.
</h5>
</div>
</div>
<br>
<center>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<h4>
A computer science portal for geeks.
</h4>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
<h4>
A computer science portal for geeks.
</h4>
<h3>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</h3>
</center>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/