Class NCIExtendedHeaderWithMegaMenu

The NCIExtendedHeaderWithMegaMenu component is used to initialize the dynamic features of the nci-header--extended variant of the nci-header component.

Default Options

There are no default options for the NCIExtendedHeaderWithMegaMenu.

Initialization Examples

The easiest way to use the header is to let the NCIDS automatically initialize your Header HTML.

Just add the following to the top of your main Javascript file and it will add code to your javascript that initializes the NCIExtendedHeaderWithMegaMenu with default options.

import '@nciocpl/ncids-js/nci-header/auto-init';
Copy

If you need the ability to customize the header's mobile nav, setup mega menus, or attach event listeners for analytics then you can manually initialize the header features.

In order to keep page sizes low, the contents of the Mega and Mobile menus are dynamically fetched by the header. The NCIExtendedHeaderWithMegaMenu component is built in an extensible way that allows for integration with multiple systems. The system provides this extensibility using the adapter pattern.

The NCIDS ships with a default mobile menu adapter, DefaultMobileMenuSource, that uses the primary navigation items as the source for the mobile menu. The default mega menu adapter, DefaultMegaMenuSource, is only provided as a placeholder as it is required for the construction of a NCIExtendedHeaderWithMegaMenu component.

If you would like to implement your own adapters please see MegaMenuAdapter and MobileMenuAdapter for more information on creating your own adapters.

Example

You can initialize the NCIExtendedHeaderWithMegaMenu component with the default adapters. This may be used when you would like to use the default adapters, but attach event listeners for analytics tracking.

import { DefaultMobileMenuSource } from '@nciocpl/ncids-js/nci-header';
import { DefaultMegaMenuSource } from '@nciocpl/ncids-js/nci-header';
import {NCIExtendedHeaderWithMegaMenu} from '@nciocpl/ncids-js/nci-header';

// Find the header HTML element.
const header = document.querySelector('.nci-header.nci-header--extended');

// Initialize the component.
NCIExtendedHeaderWithMegaMenu.create(header, {
  megaMenuSource: new DefaultMegaMenuSource(),
  mobileMenuSource: new DefaultMobileMenuSource(),
});
Copy

HTML Events

The NCIExtendedHeaderWithMegaMenu component will dispatch the following CustomEvent types that can be used to track analytics or other needs when a visitor interacts with the header.

Mega Menu Interaction Events

• nci-header:mega-menu:collapse - Dispatched with MegaMenuDisplayEventDetails details when the menu is closed via Escape key or clicking outside the menu.
• nci-header:mega-menu:expand - Dispatched with MegaMenuDisplayEventDetails details when an item in the navigation is selected and the menu for that item has been expanded.
• nci-header:primary-nav:linkclick - Dispatched with PrimaryNavClickEventDetails details when an item in the navigation is selected and there is no mega menu associated with that navigation item.

Mobile Menu Interaction Events

• nci-header:mobile-menu:open - Dispatched with MobileMenuOpenEventDetails details when the mobile "Menu" button is pressed.
• nci-header:mobile-menu:close - Dispatched MobileMenuCloseEventDetails details when the menu is closed via Escape key, close button, or clicking outside the modal.
• nci-header:mobile-menu:linkclick - Dispatched MobileMenuLinkClickEventDetails details when the mobile menu's "Back" button, menu button, or menu link is selected.

Example

import { DefaultMobileMenuSource } from '@nciocpl/ncids-js/nci-header';
import { DefaultMegaMenuSource } from '@nciocpl/ncids-js/nci-header';
import {NCIExtendedHeaderWithMegaMenu} from '@nciocpl/ncids-js/nci-header';

// Find the header HTML element.
const header = document.querySelector('.nci-header.nci-header--extended');

// Initialize the component.
NCIExtendedHeaderWithMegaMenu.create(header, {
  megaMenuSource: new DefaultMobileMenuSource(),
  mobileMenuSource: new DefaultMobileMenuSource(),
});

// Attach an event handler to the header element to listen for custom events.
header.addEventListener('nci-header:mobile-menu:open', (event) => {
   // Add your analytics code here.
   console.log('Event occurred.');
});
Copy