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.
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:
OffcanvasHeading
Some text lorem ipsum.
Some text lorem ipsum.
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.
Sidebar slides horizontally
Offcanvas is similar to modal, except that it's often used as a sidebar.
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.
Offcanvas on the right
Above:
For example:
Bootstrap Example TipsMake.com
The latest technology news channel.
Off-canvas top
Below:
For example:
Bootstrap Example TipsMake.com
The leading technology news channel.
Off-canvas bottom
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
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.
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
Dark background sidebar menu
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.