Burst menu
A round menu button that bursts big pill links over its box, each popping in a beat after the last with its own tilt and hover color.
- enhancer
- menu
- navigation
- overlay
- stagger
- mobile
- 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
Burst 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="burst-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="#">Projects</a>
<a href="#">Journal</a>
<a href="#">Contact</a>
</nav>import { BurstMenu } from "./motion/react/BurstMenu";
<BurstMenu>Your content</BurstMenu><script setup lang="ts">
import BurstMenu from "./motion/vue/BurstMenu.vue";
</script>
<template>
<BurstMenu>Your content</BurstMenu>
</template>const el = document.querySelector("#title");
el.dataset.motion = "burst-menu";The wrappers: BurstMenu.tsx (React, TypeScript) and BurstMenu.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-colors | #f6a04d,#4ea1ff,#3ccf8e,#c084fc,#ff6b8b | hover colors, comma separated, one per link in turn |
data-motion-menu | Menu | the menu button's name |
Accessibility
- The menu button has aria-expanded and aria-controls; the links stay ordinary links inside the nav landmark. - Opening moves focus to the first link; Escape, a click on the backdrop or picking a link closes the menu, and focus goes back to the button. While closed the links are inert, so Tab never lands on a hidden one. - The panel covers the nearest positioned parent; give the box it should cover position: relative. - Reduced motion shows and hides the links at once, with no pop. 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
burst-menu.js is 1.8 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.