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:

``shell
npm install @numiko/drilldown
`

Usage

$3

`ts
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();

`

$3

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.

`HTML


API

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

Release notes

$3

- Full TypeScript integration

$3

- Inital version created to work with SiteKit menus