Offcanvas, or horizontal sliding menus, can be easily created in Bootstrap 5. Below is how to create a horizontal menu or Offcanvas using Bootstrap 5 .

 

What is Offcanvas?

Offcanvas is similar to modal (it's hidden by default and shows when activated), except it's often used as a navigation menu for the sidebar of the screen.

How to create a horizontal sliding menu for the sidebar in Bootstrap 5

The following sample code shows how to create a sidebar with a horizontal sliding menu:

Offcanvas

Heading

Some text lorem ipsum.

Some text lorem ipsum.

 A Button   Open Offcanvas Sidebar 

Detailed explanation:

This class .offcanvascreates a sidebar with a horizontal sliding menu.

The class .offcanvas-startdefines the position of the horizontal sliding menu, giving it a width of 400px.

Class .offcanvas-titleensures proper alignment and line height.

Next, add the content inside the class .offcanvas-body.

To open the sidebar sliding menu, you must use an element that points to the container ID .offcanvas(#demo in the example).

 

To open a sidebar offcanvaswith the element , you can point to #demothe same attribute hrefinstead of data-bs-target.

For example:

 Bootstrap Example 

Menu QuanTriMang.com

Technology.

Life.

Science.

 Nút bấm

Sidebar slides horizontally

Offcanvas is similar to modal, except that it's often used as a sidebar.

  Mở menu trượt ngang  

 

Offcanvas location

Used .offcanvas-start|end|top|bottomto determine the position of the horizontal scrolling menu: left, right, top, or bottom.

Sample code for Offcanvas location:

Right:

For example:

 Bootstrap Example 

Menu TipsMake.com.com

Technology.

Life.

Society.

 Nút bấm

Offcanvas on the right

  Bật menu trượt bên phải  

Above:

For example:

 Bootstrap Example 

TipsMake.com

The latest technology news channel.

 Nút bấm

Off-canvas top

  Nút mở menu trượt phía trên  

 

Below:

For example:

 Bootstrap Example 

TipsMake.com

The leading technology news channel.

 Nút bấm

Off-canvas bottom

  Nút bật menu trượt ngang  

The menu slides horizontally to fit the screen size.

You can also control when you want to hide or show the offcanvas menu on different screen widths, using the class .offcanvas-sm|md|lg|xl|xxl:

For example:

 Bootstrap Example 

Menu TipsMake.com.com

Technology

Life

Science

 A Button

The menu slides horizontally to fit the screen size.

This example hides the horizontal sliding menu on screens wider than 991px. The offcanvas button is also hidden (d-lg-none).

Adjust the browser window size to see the result.

  Mở sidbar offcanvas  

 

Dark background horizontal sliding menu

Use a class .text-bg-darkto create a horizontal sliding menu with a dark background.

Tip: The sample code has added a class .btn-close-whiteto .btn-closecreate a white close button to make it stand out against a dark background:

For example:

 Bootstrap Example 

Menu TipsMake.com.com

Technology

Download

Studying IT

 A Button

Dark background sidebar menu

  Mở menu trượt ngang nền tối  

Above is everything you need to know about creating a horizontal sliding menu or Offcanvas in Bootstrap 5. Hopefully, this article is helpful to you.