By default, the plugin will prepend the menu to the
BODY and hide it from sight.
When the menu is being opened, the page slides out of view, revealing the menu and blocking the page from interaction.
In other forms, the menu can be revealed by sliding in view, hiding the page behind it.
This kind of behavior is called an "off-canvas" menu.
An "on-canvas" menu on the other hand, is always opened and visible.
It is not prepended to the
BODY and will not slide out the page.
If you want an on-canvas menu, you need to prevent the plugin from doing its default off-canvas behavior.
You can do this by setting the
offCanvas option to
Note that an on-canvas menu has
width: 100%; and
It will fill up its first ancestor node that has
As mentioned, an off-canvas menu is the default behavior for the plugin.
If you want an off-canvas menu, follow this tutorial.
In the left example, the
offCanvas option is set to
this disables the "offCanvas" add-on and results in an on-canvas menu filling up the available width and height of the