Offcanvas Helper 2

Bric By Blocs Builder

Buy Now - $30
TutorialsSettingsReviews

The number one tool for creating Offcanvas menus in Blocs.

Are you looking to create an eye-catching and stunning sidebar or mega menus? Look no further than Offcanvas Helper!  This helpful tool seamlessly brings together brics and blocs, giving you full access to the Blocs' design canvas and features. 

Offcanvas Helper overview poster
Offcanvas Helper Overview

Offcanvas Helper is a must-have tool that caters to all skill levels. To ensure you get the most out of this powerful resource, we've put together a series of tutorials that are perfect for getting started or taking your skills to the next level. The best part? These tutorials are completely free and will teach you valuable skills that can be applied to other areas of website building. Join us on this exciting journey of website design and take your creations to the next level with the Offcanvas Helper!

Fantastic Options!

Nocode like a pro.

  • Multi Offcanvas

    Add as many Offcanvas menus to your project as you like, and take individual control over each one.

  • Offcanvas Linker

    Linker is our complimentary bric, that works with Offcanvas Helper. Linker makes it easy to connect buttons or links to any of your Offcanvas menus - fast!

  • Smart Actions

    Offcanvas Helper is designed to intelligently perform various actions when opening or closing your offcanvas. You have the option to collapse all dropdown menu items, reset forms, and return menu sections to their default state. Certain smart actions are executed every time, such as closing open modals and deactivating Any Video popups when the Offcanvas is opened. These thoughtful details work together to enhance the user experience and make your website more enjoyable to use for both you and your visitors.

What you get!

  • Offcanvas Helper 2 Bric

  • Offcanvas Linker Bric

  • Offcanvas Starter Bloc - Barebones

  • Offcanvas Starter Bloc - Basic with Social Footer

Requirements

  • Blocs 4 / 5

  • Bootstrap 5

Buy Now - $30

Offcanvas Helper 2 Settings

Flexy foot-2__Bric

At a glace you can see the Offcanvas ID you are assigning settings too. 

Flexy foot-2__Options_01

Assigned Offcanvas

  • NavPlus Connect - Easy tickbox connection to NavPlus, our Offcanvas Extension yet to be releaased.

  • # - Select the ID of the Offcanvas you want these options to control. 

Flexy foot-2__Options_01

Layout & Behaviours

  • Position - Start (left), End (right), Top and Bottom, you decide where the Offcanvas menu comes from.

  • Speed - Choose how fast your Offcanas menu should show and close.

  • Sticky Nav Offset - set if you want the Offcanvas menu to be offset by the height of your sticky navbar.

  • Sticky Nav ID - Assign the ID of your sticky navbar.

  • Hide Menu Button - Have the button or link that triggers your Offcanvas hide when opening and show again when closing.

  • Full Screen Offcanvas - Makes your Offcanvas fill the whole viewport.

  • Allow Page Scrolling - Lets the user scroll your page while the Offcanvas is open.

  • Stay Open on Scroll to ID - Keeps the Offcanvas menu open when a user selects a scroll to ID menu item.

  • Fit to Height CSS - Adds a fit to height CSS style to your Offcanvas content.

  • Max-width - Set the max-width of the Offcanvas menu.  When the width of the viewport falls below this, the Offcanvas becomes 100% of the width dynamically.

Flexy foot-2__Options_01

Backdrop

  • Colour - Choosing a colour enables the backdrop by default,. You can disable the backdrop by selecting none.

  • Blur -Adds a blur effect to the Offcanvas backdrop, you can choose an intensity that suites your design.

Flexy foot-2__Options_01

Navigation Links

  • Disable Current Link - This feature will disable links inside the Offcanvas menu, where they link to the current page.  You can set an opacity for those links also. 

Flexy foot-2__Options_01

Actions on Close

Smart actions that run when the Offcanvas menu closes.  Collapse dropdown menu items and reset forms.

Flexy foot-2__Options_01

Z-index

Z-index controls for Offcanvas menu and the Sticky Navbar. 

Flexy foot-2__Options_01

Accessibility

Accessibilty is an important part of building websites.  Offcanvas Helper adds all the appropriate markup and attributes.  Here you can assign text for the Aria label to reflect the content of your offcanvas.  You can also turn any link into a correctly marked up button. 

Flexy foot-2__Options_01

Special Classes

Customise the names of your special classes to suit your design process.

Flexy foot-2__Options_01

Extras

Assign a colour for the Offcanvas bric.  Really handy for when you have multiple brics on your page. 

Flexy foot-2__Options_01

Links

Handy quick links to tutorials and support.