Updated on 18 Aug 2024
Bricks comes with two elements that are typically used for setting up full-height Offcanvas sliding menus: Offcanvas and Toggle.
Toggle adds a hamburger menu icon which when clicked slides open the Offcanvas.
Sometimes you may want to trigger the Offcanvas with a text link or a Button element or a custom div.
All you need to do for that is add the class of brxe-toggle to your custom link/button.
The class can be added either in the active class input or STYLE → CSS → CSS classes.
I prefer the latter since there is no risk of accidentally generating any unwanted styling for that class.
Multiple Offcanvas elements
What if there are multiple Offcanvas elements and you want to specify which one should be toggled upon your custom text link/button/div click?
In addition to the above brxe-toggle class add a data attribute named data-selector whose value is the HTML ID or class that identifies the Offcanvas you wish to toggle.
5 comments
Stephen
Hi there, how would you accomplish this for a navigation menu item?
Igor
Hi What if I have 2 offcanvas on a page? How can open a specific offcanvas?
Sridhar Katakam
I updated the article to answer your question. See near the end.
John P
when I add the class .brxe-toggle to a text-link, the offcanvas closes smoothly but the link does not take me to the corresponding page.
Sridhar Katakam
I think that is the expected behavior. You want the link to either take the user to the set URL or launch a modal/offcanvas.