Skip to content

marcsaleiko/navigatie

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Navigatie

Helper tool for everyday navigation building.

Installation

Install via npm npm install @marcsaleiko/navigatie --save. There are no dependencies, just plain vanilla javascript.

Usage

Include file in your script file and run Navigatie.init();. You may use the options below

Options

You may provide additional options and default overrides via an object passed to the init method. Here is a list of all available options and their default values:

Navigatie.init({
    // Selector that triggers the main navigation. May be off canvas or plain
    // navigation burger for mobile. Ignore that if you only have a subnav.
    triggerSelector: '.js-menu-trigger',
    // Selector that triggers a subnavigation open.
    subnavTriggerSelector: '.js-submenu-trigger',
    // There will be a global point where we place the openClass
    // to indicate that the main navigation is open. Defaults to body
    placeOpenClassOnSelector: 'body',
    // This is the selector of the subnavigation itself. When the subnav
    // triggers, we look for the subnavParentSelector and after that inside
    // the subnavSelector. The subnav will receive openSubnavClass on open.
    subnavSelector: '.js-submenu',
    // When the subnav triggers, we look for a container parent element, we can place
    // the openSubnavParentClass on. May be the main nav item or any other parent of 
    // the subnav and subnav trigger.
    subnavParentSelector: '.js-menu-item',
    // The placeOpenClassOnSelector will receive this class on main navigation open
    openClass: 'navigation-open',
    // The subnavParentSelector will receive this class on subnavigation open
    openSubnavParentClass: 'submenu-open',
    // The subnavSelector will receive this class on subnavigation open
    openSubnavClass: 'submenu-open',
    /**
    * This callback will be triggered on each triggerSelector click.
    * @param {boolean} navigationOpen Is the main navigation open
    * @param {NodeList} trigger The main navigation trigger nodelist 
    */
    toggleCallback: function( navigationOpen, trigger ){},
    /**
    * This calback will be triggered on each subnavTriggerSelector click.
    * @param {boolean} subnavOpen Was this subnav opened or closed
    * @param {boolean} anySubnavOpen Is at least one subnav open
    * @param {boolean} navigationOpen Is the main navigation open
    * @param {Node} subnav The subnav that has been triggered
    * @param {Node} parent The parent container element which contains the subnav and the trigger
    * @param {NodeList} subnavTrigger The subnav trigger nodelist
    */
    toggleSubnavCallback: function( subnavOpen, anySubnavOpen, navigationOpen, subnav, parent, subnavTrigger ){},
});

You may also use Navigatie.active(); to receive whether the module found at least a trigger or subnavTrigger. It indicates whether the app is somehow active and may respond to interaction.