Off Canvas

Off Canvas

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

Default

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

Right

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.

Fade

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

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

Push

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

Mini

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.

Top

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

Bottom

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.