Cascade menu

A menu button that sweeps colored layers and then a panel in from the side, its numbered links rising one after another.

enhancer
menu
navigation
panel
stagger
overlay
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Cascade menu example

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<nav data-motion="cascade-menu" aria-label="Main">
  <a href="#" data-logo><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" aria-hidden="true"><circle cx="12" cy="12" r="7"/></svg>Studio</a>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
  <p data-extra>hello@studio.example · Mon to Fri, 9 to 6</p>
</nav>

import { CascadeMenu } from "./motion/react/CascadeMenu";

<CascadeMenu>Your content</CascadeMenu>

<script setup lang="ts">
import CascadeMenu from "./motion/vue/CascadeMenu.vue";
</script>

<template>
  <CascadeMenu>Your content</CascadeMenu>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "cascade-menu";

The wrappers: CascadeMenu.tsx (React, TypeScript) and CascadeMenu.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-side`	`right`	the side the panel slides in from
`data-motion-colors`	`#f6a04d,#ffd6a8`	the layers that sweep in before the panel, comma separated
`data-motion-menu`	`Menu`	the button's label while closed
`data-motion-close`	`Close`	the button's label while open

- The button keeps one accessible name that follows its state ("Menu", then "Close") and carries aria-expanded and aria-controls; the rolling label beside it is decoration. - Opening moves focus to the first link; Escape, a click outside the panel or a link closes it and puts focus back on the button. Closed, the panel is inert. - The links stay ordinary links in an ordered list inside the nav landmark; the numbers are drawn by CSS. - The panel covers the nearest positioned parent; give the box it should cover position: relative. - Reduced motion opens and closes it at once. Reduced motion shows every state at once, with no movement, and stops anything that would move on its own. Frame loops and CSS animations pause off screen and in hidden tabs. Only transform, opacity and paint animate, so nothing around it moves.

Size

cascade-menu.js is 2.1 KB gzip, with components-kit.js 3.9 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.