Off Canvas

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor.

Sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, sunt modi! Nobis ab quia soluta, perspiciatis laudantium eveniet quaerat sed, quod hic debitis earum repellendus optio, inventore ex facere possimus.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor.

Off Canvas

A common interface pattern for navigation on narrow viewports, the off-canvas component consists of a hidden panel and a button to toggle its visibility.

aria-controls is used to associate the button with its panel and aria-hidden is toggled when the panel is opened or closed, this preserves consistency between the DOM and the accessibility tree.

To retain the correct taborder, focus is applied to the panel when opening and returned to the button when closed.

A few handy extra events are bound, keyboard navigation is enabled with the ESC key closing the panel and any interactions outside of the panel similarly closing it.

It’s important to note that no assumption is made about the panel containing navigation, hence the lack of a role="navigation"; the component is simply defined as a collapsible section of the document. Navigation can of course be contained within the panel, in which case it’s recommended to use a <nav> element for correct interpretation by the browser.

Initialising the component responsively is possible, call init() when the required breakpoint is met and destroy() when outside of that breakpoint.

Install

Froffcanvas is available to install with npm. Run with the --save flag to add the component your project dependencies.

npm install fr-offcanvas --save

The component will then be available to import.

import Froffcanvas from 'fr-offcanvas';

Functional styles for the off-canvas (offcanvas.css) that are required to display the component states correctly should be referenced via a <link> in the <head> of your document, or can be integrated into your existing stylesheet.

You can read more about installing Frend components on our About page, including details on the functional CSS and JavaScript structure.

Usage

Offcanvas relies on a paired panel and button, with a single close button living within the panel.

<button class="js-fr-offcanvas-open" aria-controls="offcanvas-1">
	Open
</button>
<section class="js-fr-offcanvas" id="offcanvas-1">
	...
	<button class="js-fr-offcanvas-close">
		Close
	</button>
</section>

Assign the function invocation to a variable.

var myOffcanvas = Froffcanvas();

Methods

// remove all bindings and attributes when no longer needed
myOffcanvas.destroy();

// re-initialise as needed
myOffcanvas.init();

Options

var myOffcanvas = Froffcanvas({
	// String - Panel selector, hook for JS init() method
	selector: '.fr-offcanvas-panel',

	// String - Selector for the open button(s)
	openSelector: '.js-fr-offcanvas-open',

	// String - Selector for the close button
	closeSelector: '.js-fr-offcanvas-close',

	// Boolean - Prevent click events outside panel from triggering close
	preventClickOutside: false

	// String - Class name that will be added to the selector when the component has been initialised
	readyClass: 'fr-offcanvas--is-ready',

	// String - Class name that will be added to the selector when the panel is visible
	activeClass: 'fr-offcanvas--is-active'
});

Browser support

Frend components rely on common JavaScript APIs like classList, and ES5 methods like forEach. Each component tests for support of these before initialising. They will be fully functional in:

  • Chrome 8+
  • Firefox 3.6+
  • Safari 5.1+
  • Opera 15+
  • Edge 12+
  • IE 10+
  • iOS Safari 5.1+
  • Android Browser 3+

Browsers that haven’t cut the mustard here will render the initial HTML to be styled up as necessary.