Off-Canvas module in Joomla

Are you wondering how to add off-canvas content to your Joomla site? When designing your website, you may want to display additional links or content while keeping the main navigation of your site minimal and uncluttered.

Module off-canvas in Joomla
Image source: wpbeaverbuilder.com

Adding an off-canvas menu can help improve the user experience and make your site easier to navigate.

Why You Might Need an Off-Canvas Module

There are several reasons why you might want to use an off-canvas menu. You can display a sub-menu located next to your page. It can even act as the sole navigation panel for your site.

Off-canvas navigation also allows you to display quick links to specific areas of your site. Thanks to the attractive structure of the off-canvas menu, this can make it easier for your visitors to find what they're looking for and keep them on your site longer.

It's also great for special offers or announcements. For example, an off-canvas menu allows you to showcase promotions without being too disruptive or distracting. You can also highlight an outstanding product or service.

Using the Off-Canvas Module on Joomla

Some Joomla developers have built-in Off-Canvas on their template, but this number is not many. If you intend to add Off-Canvas on your website, use the module below:

Buy Now ( $13 ) Demo

* It works on Joomla 3, 4, 5 and 6. You can insert any content, modules on it.

Advanced customizations include:

  • Direction
  • Background color
  • Off-canvas size
  • Custom CSS

How to use

After installing the module, go to Module Manager > New > Off-Canvas.

Fill in your content in the "Offside Content" field. To insert modules into it, within content this plugin loads a Module by ID, Syntax: {loadmoduleid <MODULE ID>} or a Module by position, Syntax: {loadposition <MODULE POSITION>} or a Module by name, Syntax: {loadmodule <MODULE NAME>}.

Next, let's set the remaining parameters. After saving the module, follow the steps in the "How to use" field to activate it.

Off-canvas settings

Don't forget to set Position and Menu Assignment for it!


Demo video:

You may also like

K2 to Content Migration

How to add Google Reviews to Joomla website

The Best Articles Comment Extensions on Joomla 4

Say something here...
You are a guest ( Sign Up ? )
or post as a guest
People in conversation:
Loading comment... The comment will be refreshed after 00:00.
  • This commment is unpublished.
    Clive Middleton · 1 days ago
    OK getting back to looking at my website

    Have got two off canvas menus working (1. for tools and 2. for main menu)

    However I can only get the Main menu to display the first level of menu items.

    Have you any suggestions for getting the sub menu items to display ?
    N.B. the menu item with sub menu items does display a down arrow, but trying to click on it only display the item at the main menu level.

    see

    https://siteupdate.vedicmaths.org/index.php

    If you want to see where I have currently got to
    • This commment is unpublished.
      David · 14 hours ago
      @Clive Middleton It seems the menu module isn't working correctly, or its JS events aren't loading because they're hidden.
      You can fix this by adding CSS to the canvas module's Custom CSS:
      - If you want the submenus to always be visible, use:
      #jmpOffset127 .dropdown-menu { display: block; }

      - If you want the submenus to only be visible when the parent menu is triggered, use:
      #jmpOffset127 li:hover>.dropdown-menu {display: block;}

      I hope it will work well!
  • This commment is unpublished.
    Clive Middleton · 5 months ago
    can you have more than one off-canvas menu on a website (if they are triggered by buttons).
  • This commment is unpublished.
    Clive Middleton · 5 months ago
    If you do not trigger the off-canvas from a menu i.e. a button, does it not display a menu ?
  • This commment is unpublished.
    ablaye · 1 years ago
    not working for me
  • This commment is unpublished.
    Sophia · 3 years ago
    Can I use it if my template already has this feature? Thanks!
  • This commment is unpublished.
    stephens · 3 years ago
    Good!

Powered By JLex Comment.