Off Canvas

Off Canvas

Custom made, simple and easy to use off-canvas navigation menu.


Default off-canvas menu, slides from left with no overlay.


Same effects as the default menu, but appears from right.

With Overlay

An overlay element fades in into the window, and turns all the focus to the off-canvas menu.


This menu does not slide in, but rather fades in.

Fade Right

Same as default fade in menu, but sticks to right side of the canvas.


Reveal effect, the menu is hidden behind the canvas, and is revealed by moving the canvas.


Push effect, the menu pushes the canvas as it slides in.


Small menu that will expand on hover.

Not dismissable on next click

Default behaviour is to hide the menu on the next click, if the click is not targetted on the menu itself or the button activating the menu.


Default menu, with slightly different dimensions, which slides in from top.


Same as the top menu, but slides in from bottom.

Top With Overlay

Showing an overlay element thus moving the focus to the menu.

Bottom With Overlay

Same state but the menu slides in from bottom.

Top Colored

Default appearing from top off-canvas menu with background color.

Bottom Colored

Default appearing from bottom off-canvas menu with background color.

Working Example

Example of bottom off-canvas asking the users to agree to using cookies.