Drilldown

The Drilldown Package provides an easy-to-use solution for creating animated, hierarchical menus using the GreenSock Animation Platform (GSAP). It allows for smooth transitions between menu levels with configurable options for customization and callbacks for advanced integrations.

Table of Contents

• Features
• Dependencies
• Installation
• Usage
• API
• Release Notes

Features

• Dynamic Hierarchical Menus: Easily create multi-level drilldown menus to efficiently manage complex site navigation structures.
• GSAP Animations: Utilizes the GreenSock Animation Platform (GSAP) to provide smooth, high-performance transitions between menu levels.
• Configurable Selectors: Customize selectors for menu items, back buttons, submenus, and more to match your HTML structure.
• Customizable Animation Callbacks: Offers hooks for animation start and complete events at both child and parent levels, allowing for fine-tuned control over menu behavior.
• Automatic Height Adjustment: Features a ResizeObserver to automatically adjust the height of the drilldown menu, ensuring it matches the content for a seamless user experience.
• Lifecycle Management: Features methods for initializing and destroying drilldown instances, enabling proper setup and teardown of components to prevent memory leaks and ensure clean transitions between states.

Dependencies

• GSAP

Installation

Install from npm:

npm install @numiko/drilldown
Copy

Usage

JS initialisation

import { Drilldown, type DrilldownOptions } from '@numiko/drilldown';

const menuElement = document.getElementById('menu') as HTMLElement;
const options: DrilldownOptions = {
  backSelector: '[data-js-menu-back]',
  nextSelector: '[data-js-menu-next]',
  submenuSelector: '[data-js-menu-container]',
  itemSelector: '[data-js-menu-item]',
};

const menu = new Drilldown(menuElement, options);
menu.init();

Copy

HTML Structure (with appropriate tailwind styles)

Note The menu markup will be generated by the menu twig template for drupal builds - this is just a basic example of the needed structure.

<div id="menu" class="overflow-hidden bg-black text-white relative top-full left-0 w-full" data-js-menu-container data-js-menu-container-level="0" aria-hidden="false">
  <ul class="flex flex-col">
    <li data-js-menu-item data-js-menu-item-level="0">
      <a class="flex gap-4 w-full text-left items-center justify-between px-9 py-7 group" href="http://www.example.com" data-js-menu-link data-js-menu-link-level="1">
      <span>Top level 1</span>
      </a>
    </li>
      <li data-js-menu-item data-js-menu-item-level="0">
        <button class="flex gap-4 w-full text-left items-center justify-between px-9 py-7 group" type="button" data-js-menu-link data-js-menu-link-level="0" data-js-menu-next aria-controls="menu_1">
            <span>Top level 2 &raquo;</span>
        </button>
        <div id="menu_1" class="invisible absolute z-10 w-full top-0" data-js-menu-container data-js-menu-container-level="1">
            <button class="flex gap-4 w-full text-left items-center justify-start px-9 py-7 group" type="button" data-js-menu-back>
              <span> &laquo; Go back</span>
            </button>
            <div>
              <a class="flex w-full text-left items-center justify-between px-9 py-7 group" data-js-menu-parent href="http://www.example.com">Top level 2</a>
            </div>
            <ul class="flex flex-col">
              <li data-js-menu-item data-js-menu-item-level="1">
                  <a class="flex gap-4 w-full text-left items-center justify-between px-9 py-7 group" href="http://www.example.com" data-js-menu-link data-js-menu-link-level="1">
                  <span>Second level 1</span>
                  </a>
              </li>
              <li data-js-menu-item data-js-menu-item-level="1">
                <button class="flex gap-4 w-full text-left items-center justify-between px-9 py-7 group" href="http://www.example.com" data-js-menu-link data-js-menu-link-level="1" data-js-menu-next aria-controls="menu_2">
                  <span>Second level 2 &raquo;</span>
                </button>
                <div id="menu_2" class="invisible absolute z-10 w-full top-0" data-js-menu-container data-js-menu-container-level="2">
                  <button class="flex gap-4 w-full text-left items-center justify-start px-9 py-7 group" type="button" data-js-menu-back>
                      <span>&laquo; Go back</span>
                  </button>
                  <div>
                      <a class="flex w-full text-left items-center justify-between px-9 py-7 group" data-js-menu-parent href="http://www.example.com">Second level 2</a>
                  </div>
                  <ul class="flex flex-col">
                      <li data-js-menu-item data-js-menu-item-level="2">
                        <a class="flex gap-4 w-full text-left items-center justify-between px-9 py-7 group" href="http://www.example.com" data-js-menu-link data-js-menu-link-level="2">
                        <span>Third level 1</span>
                        </a>
                      </li>
                  </ul>
                </div>
              </li>
              <li data-js-menu-item data-js-menu-item-level="1">
                <a class="flex gap-4 w-full text-left items-center justify-between px-9 py-7 group" href="http://www.example.com" data-js-menu-link data-js-menu-link-level="1">
                <span>Second level 3</span>
              </a>
            </li>
            </ul>
        </div>
      </li>
  </ul>
</div>
Copy

API

See documentation for more detail on how to use the package.

Release notes

v2.0.0

• Full TypeScript integration

v1.0.0

• Inital version created to work with SiteKit menus