draggable-menu

Draggable Menu

This is a draggable menu web component. It allows you to create a menu that can be dragged out of view as well as toggled in/out.

See demo

Usage

First, import the component:

import 'draggable-menu';

Then you can use it in your HTML:

<draggable-menu
  position="left"
  duration="0.8"
  ease="power2.inOut"
>  
  <!-- Your content here -->
</draggable-menu>

Attributes

name	type	description	default
placement	string (right | left | top | bottom)	The position of the menu in the viewport	right
openPosition	string (% or px)	The position of the menu in the open state	100%
closedPosition	string (% or px)	The position of the menu in the closed state	0%
duration	number	The speed of the open/close animation in seconds.	0.4
ease	string	GSAP easing function (see options here)	power4.out
enableInert	boolean	Toggles the inert attribute when the menu is closed/open	false
handle	string	An element in your slotted content that acts as the drag handle. Defined as a css queryable string (fx. #handle or .handle)	undefined

openPosition / closedPosition

A value in percent is calculated as a percentage of the viewport from the placement. A value in pixels will be the value in pixels from the placement.

Examples

/*
  This content would be at 0% from the left of the viewport when closed and
  100% from the left of the viewport when open
  Note that the width of your content also determines how much of it the user will see.
  A width of 100vw would make the entire content visible when open and all of it hidden when closed.
*/
<draggable-menu
  position="left"
  openPosition="100%"
  closedPosition="0%"
>

Events

Every state change is dispatched as a CustomEvent. The event is dispatched on toggle() and drag actions. The event type is DRAGGABLE_MENU_STATE and the event detail is an object with the following properties:

{
  open: boolean, //The current state of the menu, true if open, false if closed
  progress: number //The current progress of the animation from 0 to 1 (o being completey in the closedPosition and 1 being the openPosition,
}

API

The component provides the following methods:

• toggle(): Toggles the state of the menu. If the menu is open, it will close it, and vice versa.

• updateValues(): Updates the draggable menu's values.