Offcanvas is a Bootstrap component that allows you to create hidden content that can slide in and out of view. It’s particularly useful for creating menus or additional content that can be toggled without navigating away from the current page, resulting in a clean and efficient user interface.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Offcanvas Examples</title>
<style>
h3 {
font-size: 2em; /* Increase size for h3 */
}
p {
font-size: 1.2em; /* Increase size for paragraphs */
}
.offcanvas-title {
font-size: 1.5em; /* Increase size for offcanvas titles */
}
</style>
</head>
<body>
<h3>Examples of Offcanvas</h3>
<p>Click the buttons below to see Offcanvas in action:</p>
<!-- Button Container -->
<div class="d-flex flex-wrap gap-2 mb-3">
<!-- Example 1: Basic Offcanvas -->
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Open Offcanvas
</button>
<!-- Example 2: Offcanvas with Scrollable Content -->
<button class="btn btn-secondary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrollable" aria-controls="offcanvasScrollable">
Open Scrollable Offcanvas
</button>
<!-- Example 3: Offcanvas with Form -->
<button class="btn btn-warning" data-bs-toggle="offcanvas" data-bs-target="#offcanvasForm" aria-controls="offcanvasForm">
Open Offcanvas Form
</button>
<!-- Example 4: Offcanvas for Notifications -->
<button class="btn btn-info" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNotifications" aria-controls="offcanvasNotifications">
Open Notifications Offcanvas
</button>
</div>
<!-- Example 1: Basic Offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas Menu</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>This is some content inside the Offcanvas.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<!-- Example 2: Offcanvas with Scrollable Content -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasScrollable" aria-labelledby="offcanvasScrollableLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollableLabel">Scrollable Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body" style="height: 300px; overflow-y: auto;">
<p>Content inside a scrollable Offcanvas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Additional content to demonstrate scrolling:</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<!-- Example 3: Offcanvas with Form -->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasForm" aria-labelledby="offcanvasFormLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasFormLabel">Offcanvas Form</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<form>
<div class="mb-3">
<label for="formInput" class="form-label">Input Label</label>
<input type="text" class="form-control" id="formInput" placeholder="Type something...">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<!-- Example 4: Offcanvas for Notifications -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNotifications" aria-labelledby="offcanvasNotificationsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNotificationsLabel">Notifications</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>You have 3 new notifications:</p>
<ul>
<li>Notification 1</li>
<li>Notification 2</li>
<li>Notification 3</li>
</ul>
</div>
</div>
<h3>Best Practices for Using Offcanvas</h3>
<ul>
<li><strong>Contextual Relevance:</strong> Ensure that the content inside the Offcanvas is contextually relevant to the user's current task.</li>
<li><strong>Use Clear Labels:</strong> Label buttons and Offcanvas headers clearly to indicate their purpose.</li>
<li><strong>Accessibility:</strong> Make sure Offcanvas components are accessible via keyboard and screen readers.</li>
<li><strong>Test Responsiveness:</strong> Ensure Offcanvas elements function well across different screen sizes and devices.</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Click the buttons below to see Offcanvas in action:
This is some content inside the Offcanvas.
Content inside a scrollable Offcanvas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Additional content to demonstrate scrolling:
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
You have 3 new notifications: