Helper tool for everyday navigation building.
Install via npm npm install @marcsaleiko/navigatie --save. There are no dependencies, just plain vanilla javascript.
Include file in your script file and run Navigatie.init();. You may use the options below
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.