How to Add a Slide-In or Side Navigation in BricksBuilder

Adding a mobile-friendly slide-in or side navigation in BricksBuilder starts with using the “off-canvas” element. Drag it into your structure and position it outside your main section to serve as your navigation container. Once placed, enable the off-canvas toggle in the content settings to keep it exposed as you build and customize it. Inside, you can format links as a vertical menu and style them to fit your design.

Next, you can integrate icons and links into the navigation. Using the style and CSS tabs, adjust fonts, sizes, and add icons for a clean look. Duplication makes adding additional links simple, and you can easily update each link’s content and style. Consider including a logo for branding, and add a clear “close” button to let users dismiss the menu effortlessly.

Finally, make the navigation interactive with a hamburger icon. Tie it to the off-canvas menu using its ID. Test the setup to ensure the toggle works seamlessly, and adjust the structure for a smooth user experience. This approach keeps your design functional, clean, and perfect for mobile-friendly navigation.

Heres the CSS I used for my navigation – to make the icons for each course lesson easier to manage.


%root% {
& li {
padding-left: .25em;
margin-left: -2rem;

&::marker {
font-family: themify;
font-weight: 400;
content: "\e6ad";
}
}
}