❤
npm
Sign UpSign In

fr-offcanvas

1.1.1 • Public • Published

permalink: /components/offcanvas/ filename: offcanvas title: Off Canvas alpha: false sources:

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'
});

Readme

Keywords

Package Sidebar

Install

npm i fr-offcanvas

Repository

github.com/frend/frend.co/tree/gh-pages/_components/offcanvas

Homepage

frend.co/components/accordion

Weekly Downloads

50

Version

1.1.1

License

MIT

Unpacked Size

17.1 kB

Total Files

7

Last publish

Collaborators

  • ffffrend
Try on RunKit
Report malware