How to Add a Slide-In or Side Navigation in BricksBuilder (Off-Canvas Menu)

Updated January 2026: This tutorial shows how to build a mobile-friendly slide-in navigation using the Bricks “Off-Canvas” element, then connect it to a hamburger icon toggle.

Most course platforms use a simple vertical navigation that slides in from the left or right. In Bricks Builder, the cleanest way to build this is with the Off-Canvas element.

This approach works great for LMS-style lesson layouts because it gives you:

• A clean vertical menu for lessons
• Mobile-friendly navigation without clutter
• A toggle button (hamburger icon) to open/close the menu
• Full design control in Bricks (no extra navigation plugin required)

Quick Answer: How do you create a slide-in navigation in Bricks Builder?

Use the Bricks Off-Canvas element as your navigation container, insert a vertical list of links inside it, then connect the Off-Canvas ID to a hamburger icon toggle. Add an “X” close icon inside the menu for usability.

Lesson Overview

In this lesson you’ll build a slide-in side navigation for your course lessons page. The result is a clean and functional vertical menu that works well on desktop and mobile.

Main Points

• Add Off-Canvas element for navigation
• Style links and add navigation icons
• Integrate branding with a logo and close button
• Set up toggle (hamburger icon) using Off-Canvas ID
• Test navigation on the front end

Step-by-Step: Create a Slide-In Side Navigation (Off-Canvas)

Step 1: Add the Off-Canvas Element

Open your Bricks page/template and collapse your structure panel so it’s easier to place elements correctly.

Then:

• Click the plus icon
• Search for Off-Canvas
• Drag the Off-Canvas element to the top of the structure
• Place it outside your main section (so it behaves like a global menu)

Step 2: Keep the Off-Canvas Menu Visible While Building

While building the navigation, it helps to keep the menu visible so you can design it easily.

In the Off-Canvas content settings:

• Enable the toggle option that keeps the Off-Canvas exposed

This allows you to design the menu without constantly opening and closing it.

Step 3: Add Navigation Links (Vertical Menu)

Inside the Off-Canvas element:

• Add a Rich Text element
• Create a simple unordered list
• Turn list items into links for each lesson

This creates a simple vertical navigation list that you can fully style.

Optional Styling: Add Icons to Your Navigation Links

Here’s the CSS you used to make icons easier to manage for each course lesson link. This adds an icon (via list marker) and aligns it nicely.

CSS for menu icons (paste into Bricks Custom CSS):

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

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

This method is clean because it automatically applies the icon to every list item without needing to manually place icons beside every link.

Change the Icon

You can change the icon by swapping the content value. This is a simple way to create different icon styles for different link groups inside your menu.

Add Branding: Logo + Close Button

Step 4: Add a Logo to the Off-Canvas Menu

Inside the Off-Canvas menu:

• Add an Image element
• Select your logo from the media library
• Resize it to fit the menu layout

This gives the navigation a more polished, branded feel.

Step 5: Add a Close Button (“X” Icon)

Every slide-in menu should have a clear close option.

To add this:

• Add a container/row near the top of the Off-Canvas
• Set alignment to End so it moves to the right
• Insert an icon and choose a close/X icon

This gives users an obvious way to dismiss the menu.

Create the Hamburger Toggle Button (Open the Menu)

Step 6: Hide the Menu While You Build the Toggle

Once your menu layout is done:

• Turn off the “keep exposed” option in Off-Canvas

Now the menu will behave normally (hidden until opened).

Step 7: Add a Hamburger Icon on the Page

Next, create a small bar or header area where the toggle button will live.

Example setup:

• Add a Div or Container above your main content section
• Add a Toggle element (hamburger icon)
• Add optional text like “Click to see videos” next to it

Using a row layout helps align text and icon cleanly.

Step 8: Connect the Toggle to the Off-Canvas Menu ID

This is the key step.

In your Off-Canvas element settings, you will see an ID. Copy that ID.

Then:

• Click the hamburger icon toggle element
• Paste the Off-Canvas selector into the toggle target field

Important: The selector must include the required Off-Canvas prefix (example: #brx-offcanvas-...). If the selector is missing the prefix, the toggle will not work.

Test the Slide-In Navigation

Save your changes and test the menu on the front end:

• Click the hamburger icon to open the navigation
• Click the close icon to close it
• Click outside the menu to confirm overlay click-to-close works

If the toggle does not work, double-check the Off-Canvas ID and ensure it matches exactly in the toggle selector.

Lesson Resources

• CSS for Menu: Use the icon marker CSS shown above

Wrapping It Up

Using the Bricks Off-Canvas element is one of the cleanest ways to build a mobile-friendly slide-in navigation for a course platform. It keeps the layout simple, helps users move between lessons faster, and gives you full control over styling inside Bricks Builder.