Menu

Navigation

Responsive navigation menus.

Demos

Basic

Simple responsive navigation.

<!-- Demo coming soon -->
import { Navigation, Utils } from 'Formstone';

Utils.ready(() =&gt; {
  // Demo coming soon
});
/* Demo coming soon */

Options

Set instance options by passing a valid object at initialization, or to the public .defaults() method. Custom options for a specific instance can also be set by attaching a data-navigation-options attribute containing a properly formatted JSON object to the target element.

Name Type Default Description
gravity string 'left' Navigation gravity (left, right)
label string 'Menu' Accessibility label
maxWidth string '980px' Width to auto-disable plugin
type string 'toggle' Navigation type (toggle, push, reveal, overlay)
focusables string 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' Focusable elements

Data attributes provide configuration options and can be set directly on the target element.

Name Type Description
data-navigation-options string (JSON) JSON encoded object containing instance options
data-navigation-handle string Selector for navigation handle element
data-navigation-content string Selector for content element

Methods

Methods are publicly available to all active instances, unless otherwise stated.

Name Description
.close() Closes navigation instance
.construct() Initializes plugin on target elements
.defaults() Sets default options for future instances
.destroy() Removes plugin and all related data
.disable() Disables navigation instance
.enable() Enables navigation instance
.open() Opens navigation instance

.close()

Closes instance.

Examples

el.Navigation.close();

.construct()

Initializes plugin on target elements.

Returns

Type Description
NodeList NodeList of target elements

Parameters

Name Type Default Description
selector string (required) '' Selector string to target
options object (optional) {} Object containing instance options

Examples

let targets = Navigation.construct('.js-navigation');
Navigation.construct('.js-navigation', { type: 'overlay' });

.defaults()

Sets default options for future initialization.

Parameters

Name Type Default Description
options object (required) {} Object containing default options

Examples

Navigation.defaults({
  type: 'push'
});

.destroy()

Removes plugin and all related data.

Examples

el.Navigation.destroy();

.disable()

Disables instance.

Examples

el.Navigation.disable();

.enable()

Enables instance.

Examples

el.Navigation.enable();

.open()

Opens instance.

Examples

el.Navigation.open();

Events

Events are triggered on the target instance's element, unless otherwise stated.

Name Description
navigation:open Instance opened
navigation:close Instance closed

Styles

CSS custom properties are used to modify default styles.

Property Default Description
--fs-navigation-offscreen-background #fff Offscreen menu background
--fs-navigation-offscreen-width 80vw Offscreen menu width
--fs-navigation-offscreen-zindex 0 Offscreen menu z-index
--fs-navigation-offscreen-duration 0.2s Offscreen transition duration
--fs-navigation-offscreen-timing ease Offscreen transition timing
--fs-navigation-overlay-zindex 3 Overlay navigation z-index
--fs-navigation-overlay-content-background rgba(0, 0, 0, 0.8) Overlay content background
--fs-navigation-overlay-content-zindex 2 Overlay content z-index
--fs-navigation-push-zindex 0 Push navigation z-index
--fs-navigation-push-content-zindex 1 Push content z-index

Classes allow deeper customization and indicate the current state of a specific instance.

Classname Type Description
.fs-navigation element Target element
.fs-navigation-handle element Handle element
.fs-navigation-content element Content element
.fs-navigation-enabled modifier Indicates enabled state
.fs-navigation-open modifier Indicates open state
.fs-navigation-closed modifier Indicates closed state
.fs-navigation-animated modifier Indicates animated state
.fs-navigation-toggle-nav modifier Toggle-mode navigation panel
.fs-navigation-toggle-handle modifier Toggle-mode navigation handle
.fs-navigation-push modifier Push-mode
.fs-navigation-push-nav modifier Push-mode navigation panel
.fs-navigation-push-left-nav modifier Push-mode gravity
.fs-navigation-push-right-nav modifier Push-mode gravity
.fs-navigation-push-handle modifier Push-mode navigation handle
.fs-navigation-push-left-handle modifier Push-mode gravity
.fs-navigation-push-right-handle modifier Push-mode gravity
.fs-navigation-push-content modifier Push-mode navigation handle
.fs-navigation-push-left-content modifier Push-mode gravity
.fs-navigation-push-right-content modifier Push-mode gravity
.fs-navigation-reveal modifier Reveal-mode
.fs-navigation-reveal-nav modifier Reveal-mode navigation panel
.fs-navigation-reveal-left-nav modifier Reveal-mode gravity
.fs-navigation-reveal-right-nav modifier Reveal-mode gravity
.fs-navigation-reveal-handle modifier Reveal-mode navigation handle
.fs-navigation-reveal-left-handle modifier Reveal-mode gravity
.fs-navigation-reveal-right-handle modifier Reveal-mode gravity
.fs-navigation-reveal-content modifier Reveal-mode navigation handle
.fs-navigation-reveal-left-content modifier Reveal-mode gravity
.fs-navigation-reveal-right-content modifier Reveal-mode gravity
.fs-navigation-overlay modifier Overlay-mode
.fs-navigation-overlay-nav modifier Overlay-mode navigation panel
.fs-navigation-overlay-left-nav modifier Overlay-mode gravity
.fs-navigation-overlay-right-nav modifier Overlay-mode gravity
.fs-navigation-overlay-handle modifier Overlay-mode navigation handle
.fs-navigation-overlay-left-handle modifier Overlay-mode gravity
.fs-navigation-overlay-right-handle modifier Overlay-mode gravity
.fs-navigation-overlay-content modifier Overlay-mode content wrapper
.fs-navigation-overlay-left-content modifier Overlay-mode gravity
.fs-navigation-overlay-right-content modifier Overlay-mode gravity