Safe-Triangles

Inspired by: https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/

---

Usage

1. Installing

Install the package using one of the following options:

NPM

npm install @svondervoort/safe-triangles

Yarn

yarn add @svondervoort/safe-triangles

2. Requiring resources

Javascript

import generateSafeTriangles from "@svondervoort/safe-triangles";

Styling

// CSS
import '@svondervoort/safe-triangles/dist/css/style.css';

// SCSS
import '@svondervoort/safe-triangles/src/scss/style.scss';

3. Adding data-attribute

data-safe-triangle-dropdown="..."

Add this to the menu-item anchor element and the dropdown it is associated with.

4. Initializing

Initialize the logic using generateSafeTriangles();. The function requires either a selector <string> or a DOM node list <NodeList>.

---

Options

Name	Type	Default	Description
delay	number	100	The delay of which the path of the safe-triangle gets updated. A minimum of 100ms is recommended since the path follows the cursor of the user.
debug	boolean	false	If set to true it will show the overlays so you can see the Safe Triangles doing their work

---

Example

// Import Javascript
import generateSafeTriangles from "@svondervoort/safe-triangles";

// Import SCSS
import '@svondervoort/safe-triangles/src/scss/style.scss';

// Create NodeList
let elements = document.querySelectorAll('.header-main-nav-l1__item-link--has-children-js, .header-main-nav-l2__item-link--has-children-js');

// Initialize with delay and debug
generateSafeTriangles(elements, { delay: 100, debug: true });

---

Demo

You can find a demo here with 3 variants:

• Without Safe-Triangles
• With Safe-Triangles ( debug: true )
• Without Safe-Triangles ( debug: false )

---

Roadmap

• Add left and top options for dropdown direction/position.