Off-canvas

Create a smooth off-canvas sidebar that slides in and out of the page.

The Off-canvas component is perfect for building a mobile navigation, similar to those which are popular with many native mobile apps, where a single button in the upper left corner toggles an off-canvas sidebar with a menu.


Usage

The Off-canvas component consists of an overlay and an off-canvas bar.

Class Description
.f-offcanvas Add this class to a <div> element to create the bar container and an overlay, blanking out the page. An id also needs to be added, so the off-canvas sidebar can be toggled.
.f-offcanvas-bar Add this class to a child <div> element to create the off-canvas bar.

You can use any element to toggle an off-canvas sidebar. An <a> element needs to be linked to the id of the off-canvas container. To enable the necessary JavaScript, just add the data-f-offcanvas attribute. If you are using another element, like a button, just add the data-f-offcanvas="{target:'#ID'}" attribute to target the id of the off-canvas container.

Example

Open
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Markup

<!-- This is an anchor toggling the off-canvas sidebar -->
<a href="#my-id" data-f-offcanvas>...</a>

<!-- This is a button toggling the off-canvas sidebar -->
<button class="f-btn" data-f-offcanvas="{target:'#my-id'}">...</button>

<!-- This is the off-canvas sidebar -->
<div id="my-id" class="f-offcanvas">
	<div class="f-offcanvas-bar">...</div>
</div>

Nested Off-canvas

Add the .f-offcanvas-nested class to the off-canvas element and initialise the nested element from inside another off-canvas element.

Example

Open
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Markup

<!-- This is an anchor toggling the off-canvas sidebar -->
<a href="#my-id" data-f-offcanvas>...</a>

<!-- This is the off-canvas sidebar -->
<div id="my-id" class="f-offcanvas">
	<div class="f-offcanvas-bar">
		<button class="f-btn" data-f-offcanvas="{target:'#offcanvas-nested'}">Open</button>
	</div>
</div>
<!-- This is the nested off-canvas -->
<div id="offcanvas-nested" class="f-offcanvas f-offcanvas-nested">
	<div class="f-offcanvas-bar">
		<!-- This will close the currently nested off-canvas -->
		<button class="f-offcanvas-back"><i class="material-icons">chevron_left</i> <span>back</span></button>
	</div>
</div>

Animation Modes

You can choose between four different animation modes how the off-canvas bar should appear:

Example

Push (Default) Slide Reveal None

Markup

<a href="#my-id" data-f-offcanvas="{mode:'slide'}">...</a>

<a href="#my-id" data-f-offcanvas="{mode:'reveal'}">...</a>

<a href="#my-id" data-f-offcanvas="{mode:'none'}">...</a>

Flip modifier

Add the .f-offcanvas-bar-flip class to the off-canvas bar to adjust its alignment, so that it slides in from the right.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Markup

<div id="my-id" class="f-offcanvas">
	<div class="f-offcanvas-bar f-offcanvas-bar-flip">...</div>
</div>

Off-canvas navs

An off-canvas sidebar can contain a nav from the Nav component. Add the .f-nav-offcanvas class to style the nav according to the off-canvas context.

Example

Markup

<!-- This is the button toggling the off-canvas sidebar -->
<button class="f-btn" data-f-offcanvas="{target:'#my-id'}">...</button>

<!-- This is the off-canvas sidebar -->
<div id="my-id" class="f-offcanvas">
	<div class="f-offcanvas-bar">
		<ul class="f-nav f-nav-offcanvas" data-f-nav>...</ul>
	</div>
</div>

Off-canvas panels

You can place any custom content inside the off-canvas bar. Just wrap it with a <div> and add the .f-panel class.

Example

Panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Markup

<!-- This is the button toggling the off-canvas sidebar -->
<button class="f-btn" data-f-offcanvas="{target:'#my-id'}">...</button>

<!-- This is the off-canvas sidebar -->
<div id="my-id" class="f-offcanvas">
	<div class="f-offcanvas-bar">
		<div class="f-panel">...</div>
	</div>
</div>

JavaScript

You can open and close the offcanvas via JavaScript:

// Show an off-canvas matching the passed CSS selector
FatKit.offcanvas.show('#my-id');

// Hide any active offcanvas. Set force to true, if you don't want any animation.
FatKit.offcanvas.hide([force = false])