Bootstrap 5 offcanvas sidebar function

A sidebar component is called a bootstrap 5 Offcanvas. It has a JavaScript option to display from the viewport's top, bottom, or the left edge.

When certain items are toggled, buttons or anchors are used as triggers, and data attributes are used to call our JavaScript.

When a button is pressed, we may use the bootstrap 5 Off-Canvas menu to show our content in a sidebar. It enables us to highlight a certain section of our website on the side navigation panel, providing a user-friendly interface for the site's visitors.

With bootstrap 5 classes and our JavaScript plugin, we can incorporate hidden sidebars into projects or applications for navigation, shopping carts, and more.

Working Process of Offcanvas

• A sidebar component, Offcanvas has a JavaScript option that allows it to display from the viewport's top, bottom, or left edge.
• When certain items are toggled, buttons or anchors are used as triggers, and data attributes are used to call our JavaScript.
• Offcanvas and modals both use a portion of the same JavaScript code. Despite having relatively similar concepts, they are different plugins.
• The styles and dimensions of offcanvas also inherit several source Sass variables from the modal.
• Offcanvas provides a default backdrop when displayed, which can be clicked to make the offcanvas invisible.
• There can only be one offcanvas displayed at once, just like modals.

Basic offcanvas sidebar function

The offcanvas sidebar is made with the ".offcanvas" class. The offcanvas is positioned and made 400px wide by the ".offcanvas-start" class.
We must utilise a <button> or an <a> element with the id of the ".offcanvas" container. It helps display the offcanvas sidebar function after clicking on the button or anchor function.

Syntax

The following syntax shows the basic offcanvas sidebar function.

Example

The following example shows a basic offcanvas function on the left side.

Output

The following image shows the basic offcanvas sidebar function with basic information.

Before offcanvas

After offcanvas

Offcanvas sidebar with anchor function

We can use the <a> element with the id of the ".offcanvas" container. It helps display the offcanvas sidebar function after clicking the anchor function.

Syntax

The following syntax shows the offcanvas sidebar function with the anchor tag.

Example

The following example shows the basic offcanvas function with the anchor tag.

Output

The following image shows the basic offcanvas sidebar function with the anchor tag.

Before offcanvas

After offcanvas

Bootstrap 5 offcanvas function with data

The "offcanvas-header" and the "offcanvas-body" include in the canvas function for heading and detail information, respectively. The "offcanvas-title" provides the title of the sidebar function in the header element.

Syntax

The following syntax shows the basic offcanvas sidebar function.

Example

The following example shows a basic offcanvas function with header and body content.

Output

The following image shows header and body data in the offcanvas function.

Offcanvas function with close button

The offcanvas function uses a close or simple button class per the application's format. The close button uses to close or dismiss the offcanvas sidebar function. Here, we can use the data-bs-dismiss = "offcanvas" element to dismiss the sidebar function.

Syntax

The following syntax shows the basic offcanvas sidebar function with a close button.

Example

The following example shows the offcanvas function with a close button.

Output

The following image shows the offcanvas function with a close button.

End position Offcanvas function

The "offcanvas-end" class comes with the bootstrap 5 "offcanvas" class in the html element. The "offcanvas-end" is a placement class that places the offcanvas sidebar function to the right side of the screen or web application.

Syntax

The following syntax shows a basic offcanvas sidebar function with an end position sidebar.

Example

The following example shows an offcanvas function with an end position sidebar.

Output

The following image shows the offcanvas function with the end position sidebar.

Top position Offcanvas function

The "offcanvas-top" class comes with the bootstrap 5 "offcanvas" class in the web page element. The "offcanvas-top" is a placement class that places the offcanvas sidebar function on the top of the display screen or web application.

Syntax

The following syntax shows the basic offcanvas sidebar function with the top position sidebar.

Example

The following example shows a basic offcanvas function with a top position sidebar.

Output

The following image shows the offcanvas function with the top position sidebar.

Bottom position Offcanvas function

The "offcanvas-bottom" class comes with the "offcanvas" class in the html element. The "offcanvas-bottom" is a placement class that places the offcanvas sidebar function on the bottom of the display screen or web application.

Syntax

The following syntax shows the basic offcanvas sidebar function with the bottom position sidebar.

Example

The following example shows a basic offcanvas function with a bottom position sidebar.

Output

The following image shows the offcanvas function with the bottom position sidebar.

Default Display offcanvas function

The offcanvas sidebar function hides by default on the web application. The "show" class uses the "offcanvas" class to display the sidebar by default. The sidebar dismisses after clicking on the close button.

Syntax

The following syntax displays a basic offcanvas sidebar function with a default display.

Example

The following example shows the offcanvas function with a default display.

Output

The following image shows the offcanvas function with default display status.

Conclusion

The offcanvas sidebar function uses navigation and displays extra information without much space. It helps developers and users to create and use large-size web applications easily.