Anchored expandable menu

1. Copy to Webflow

   Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: Webflow removes any font your site has not installed.
   Copy to Webflow

   Copies the version "Reference version". Pick another version above the preview to copy that one.

2. Add custom CSS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

3. Add custom JS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

4. Tune it

   Custom attributes
   Select the section on the canvas and open the Settings panel. Under Custom attributes, add a pair: the name on the left, the value on the right.

   Custom attribute	What it does
   data-anchored-menu	Marks the section the effect plays on. It takes no value: leave the value field empty.
   data-anchored-menu-toggle	Marks the button that opens and closes the menu. It can sit outside the menu, in a bar of its own. Without it nothing opens the menu but JavaScript, and the console says nothing. [ Required ]
   data-anchored-menu-panel	Marks the block that unfolds. Without it the engine takes the last block inside the menu, and refuses to mount, with a warning in the console, when the menu holds a single block. [ Optional ]
   data-anchored-menu-links	Marks the box holding the links that rise one after the other. Without it the engine takes the first nav inside the menu, and moves no link when there is none. [ Optional ]
   data-anchored-menu-link	Marks one link to move, for links that do not all sit in the same box. As soon as one link carries it, only the marked links rise. [ Optional ]
   data-anchored-menu-mask	Marks the box that clips a row while its link rises. Without it the engine wraps each link in a box it builds, and the hairline you drew between two rows is not on it. [ Optional ]
   data-anchored-menu-block	Marks a side block that settles after the links, a contact card or a footer line. Without it the block is simply there from the start. [ Optional ]

   Settings
   Every setting is a custom attribute too, added the same way and on the same section. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-anchored-menu-widen	0.45	How long the box takes to stretch from its compact width to the width of the panel, in seconds.
   data-anchored-menu-widen-ease	power3.inOut	Shape of the widening, where it speeds up and where it settles. Options: any GSAP ease, power2.out and expo.inOut for instance.
   data-anchored-menu-grow	0.5	How long the box takes to drop down to the height of the panel, in seconds.
   data-anchored-menu-grow-ease	power3.inOut	Shape of the drop in height. Options: any GSAP ease, power2.out and expo.inOut for instance.
   data-anchored-menu-grow-overlap	0.12	How early the height starts, counted back from the end of the widening, in seconds.
   data-anchored-menu-reveal	0.6	How long one link takes to rise out of its row, in seconds.
   data-anchored-menu-reveal-stagger	0.05	Delay between two links rising, in seconds.
   data-anchored-menu-reveal-ease	power4.out	Shape of the links rising. Options: any GSAP ease, back.out and power2.out for instance.
   data-anchored-menu-reveal-from	130	How far under its row a link starts out, as a percentage of a row height.
   data-anchored-menu-reveal-overlap	0.2	How early the links start, counted back from the end of the drop in height, in seconds.
   data-anchored-menu-lift	clamp(10px, 1.55vh, 18px)	How far a side block travels up while it fades in, the coordinates card and the foot line, any CSS unit.
   data-anchored-menu-blocks	0.4	How long one side block takes to settle in, in seconds.
   data-anchored-menu-blocks-stagger	0.06	Delay between two side blocks, in seconds.
   data-anchored-menu-blocks-ease	power2.out	Shape of the side blocks settling in. Options: any GSAP ease, back.out and power2.out for instance.
   data-anchored-menu-blocks-offset	0.05	Delay between the links starting to rise and the side blocks starting to fade, in seconds.
   data-anchored-menu-open-speed	1	Playback speed of the whole unfolding, 1 being the durations above.
   data-anchored-menu-close-speed	1.35	Playback speed of the folding back, which plays the same timeline backwards.
   data-anchored-menu-escape	true	Whether the Escape key closes the menu. Options: true, false.
   data-anchored-menu-close-on-outside	true	Whether a click anywhere outside the box closes the menu. Options: true, false.
   data-anchored-menu-close-on-link	true	Whether a click on a menu link closes the menu. Options: true, false, false being for links that open elsewhere.
   data-anchored-menu-remeasure	120	Delay before a box caught mid travel by a resize or a late face reads both sizes again, in ms. At rest nothing is read, the CSS sizes the box.
   data-anchored-menu-label-open	[ Menu ]	Text written in the button while the menu is closed. Options: any short phrase; a button holding an icon is left alone.
   data-anchored-menu-label-close	[ Close ]	Text written in the button while the menu is open. Options: any short phrase; a button holding an icon is left alone.
   data-anchored-menu-debug	false	Whether the engine writes what it read on the menu element, as data-anchored-menu-debug-* attributes (state, last event, size at the click, the two measured sizes, current size, inline size, GSAP version, mount time), and logs every change in the console. Options: true, false. On for a preview you cannot inspect, off on a live site.

Two files, no build step. It also needs GSAP 3 on the page for the travel, loaded with the tag in step 1. Without it the menu still opens and closes, at once and with no travel. It runs in the browser only. Load it with a script tag in plain HTML, in a client-side script in Astro, never in the frontmatter. In React, call AnchoredMenu.mount(ref.current) in useEffect and destroy() in its cleanup.

1. Tune it, either way

   Per element with an attribute, or once for the whole site by editing DEFAULTS at the top of the file.

   Attribute	Default	What it is	Lower	Higher
   data-anchored-menu-widen	0.45	How long the box takes to stretch from its compact width to the width of the panel, in seconds.	It snaps open sideways	A slow, deliberate stretch
   data-anchored-menu-widen-ease	power3.inOut	Shape of the widening, where it speeds up and where it settles. Options: any GSAP ease, power2.out and expo.inOut for instance.
   data-anchored-menu-grow	0.5	How long the box takes to drop down to the height of the panel, in seconds.	The panel is there in one go	The box unrolls slowly downwards
   data-anchored-menu-grow-ease	power3.inOut	Shape of the drop in height. Options: any GSAP ease, power2.out and expo.inOut for instance.
   data-anchored-menu-grow-overlap	0.12	How early the height starts, counted back from the end of the widening, in seconds.	Two separate stages, width then height	One single unfolding, the two stages blur together
   data-anchored-menu-reveal	0.6	How long one link takes to rise out of its row, in seconds.	The rows snap into place	A long, drawn-out rise
   data-anchored-menu-reveal-stagger	0.05	Delay between two links rising, in seconds.	The list arrives as one block	The rows come in one by one
   data-anchored-menu-reveal-ease	power4.out	Shape of the links rising. Options: any GSAP ease, back.out and power2.out for instance.
   data-anchored-menu-reveal-from	130	How far under its row a link starts out, as a percentage of a row height.	It barely slides	It comes from further below, and starts later inside its own row
   data-anchored-menu-reveal-overlap	0.2	How early the links start, counted back from the end of the drop in height, in seconds.	The rows wait for the box	They rise while the box is still growing
   data-anchored-menu-lift	clamp(10px, 1.55vh, 18px)	How far a side block travels up while it fades in, the coordinates card and the foot line, any CSS unit.	It barely moves	It slides in from further down
   data-anchored-menu-blocks	0.4	How long one side block takes to settle in, in seconds.	They are simply there	They drift into place
   data-anchored-menu-blocks-stagger	0.06	Delay between two side blocks, in seconds.	They arrive together	One after the other, down the panel
   data-anchored-menu-blocks-ease	power2.out	Shape of the side blocks settling in. Options: any GSAP ease, back.out and power2.out for instance.
   data-anchored-menu-blocks-offset	0.05	Delay between the links starting to rise and the side blocks starting to fade, in seconds.	Rows and card arrive together	The card lands well after the rows
   data-anchored-menu-open-speed	1	Playback speed of the whole unfolding, 1 being the durations above.	The menu opens slower	It opens faster
   data-anchored-menu-close-speed	1.35	Playback speed of the folding back, which plays the same timeline backwards.	The menu lingers on the way out	It gets out of the way
   data-anchored-menu-escape	true	Whether the Escape key closes the menu. Options: true, false.
   data-anchored-menu-close-on-outside	true	Whether a click anywhere outside the box closes the menu. Options: true, false.
   data-anchored-menu-close-on-link	true	Whether a click on a menu link closes the menu. Options: true, false, false being for links that open elsewhere.
   data-anchored-menu-remeasure	120	Delay before a box caught mid travel by a resize or a late face reads both sizes again, in ms. At rest nothing is read, the CSS sizes the box.	The travel follows a dragged window closely, at the cost of reading more often	Fewer readings, and a travel may land on an old size that the rest state then corrects in one step
   data-anchored-menu-label-open	[ Menu ]	Text written in the button while the menu is closed. Options: any short phrase; a button holding an icon is left alone.
   data-anchored-menu-label-close	[ Close ]	Text written in the button while the menu is open. Options: any short phrase; a button holding an icon is left alone.
   data-anchored-menu-debug	false	Whether the engine writes what it read on the menu element, as data-anchored-menu-debug-* attributes (state, last event, size at the click, the two measured sizes, current size, inline size, GSAP version, mount time), and logs every change in the console. Options: true, false. On for a preview you cannot inspect, off on a live site.

2. Drive it from JavaScript

   When something other than the control has to open or close the menu, or when the page reacts to it.
   JavaScript Copy

   const element = document.querySelector('[data-anchored-menu]');
   element.addEventListener('anchoredmenu:open', (e) => {
     console.log(e.detail);
   });
   
   const menu = AnchoredMenu.mount(element);   // the menu auto() mounted, or a new one
   menu.open();   // and menu.close(), menu.toggle(), menu.isOpen()
   
   // When the menu leaves the page:
   menu.destroy();   // puts the two states back and drops the listeners

3. Fit it to your page

   • One setting for every menu of the page, without opening the file: declare window.AnchoredMenuSettings = { widen: 0.6 } in a script placed before anchored-menu.js. The three levels, least specific first, are DEFAULTS, then that object, then a data-anchored-menu-* attribute on the menu element, so one menu can still differ from the page-wide setting.
   • GSAP is read at each click, not at mount. The menu mounts on DOM ready whether the library is there or not, so GSAP, Webflow's own copy included, can land after the script, and the engine never loads a second one on top. A box that is not rendered at the click, inside a display: none parent for one, also switches state at once, with no travel.
   • Minimal structure, as in snippet.html: a block carrying data-anchored-menu, holding a bar with a button carrying data-anchored-menu-toggle and a panel carrying data-anchored-menu-panel. Inside the panel, a nav (data-anchored-menu-links), one mask per row (data-anchored-menu-mask) and the blocks that fade in (data-anchored-menu-block).
   • The script builds nothing except the masks, and only for links that do not already sit in one. Everything else is markup you own, so a builder can style it. The masks are worth keeping in the markup rather than letting the script wrap the links: the hairline between two rows is carried by the mask, and a mask you wrote is a box you can style.
   • The rest is styled, not tuned: the width of the panel, so the width of the open box, the padding of the bar, so the height of the compact box, the size, weight and colour of a link, the hairline between two rows, and the background, glass, border and radius of the box are your own classes. The surface of the box when no class sets one is the custom property --anchored-menu-surface. anchored-menu.css carries the mechanics only: the clip, the folded panel, the row masks. Everything it proposes and does not need (the fixed position at the top, the glass, the border, the 14 px radius, the z-index) sits inside :where(), which carries no specificity: one class of yours wins over it, with no !important anywhere.
   • The text of the button is a setting, not markup: the engine writes labelOpen and labelClose into it, so words written in the markup are replaced. A button that holds elements rather than plain text holds an icon, and the engine leaves its markup alone.
   • The panel never covers the page: no overlay, no scroll lock, no focus trap. If the site needs a darkened backdrop, add it as a separate layer and animate it on anchoredmenu:open and anchoredmenu:close.
   • **From JavaScript, beyond open, close, toggle, isOpen and destroy**: the api of AnchoredMenu.mount(element, overrides) also carries settings, timeline(), the travel under way and null at rest, and measure(), which reads both sizes again during a travel, for a layout change the engine cannot hear; at rest there is nothing to read, the CSS already sizes the box. The element fires anchoredmenu:close as well as anchoredmenu:open, both bubbling, with { menu } as event.detail. mount() returns null, with a warning in the console, when no block carries data-anchored-menu-panel, and AnchoredMenu.auto(container) mounts every menu found inside a container.
   • Debugging a preview you cannot inspect, the Webflow Designer's for one: data-anchored-menu-debug="true" on the menu writes the last readings on the element.
   • The words of the markup are the preview's, and they ship as they are: pasted, the page reads the way the preview did. Put the user's own content in their place whenever they want, in the page's language. The demos also put a preventDefault on their nav links: remove it.
   • On Webflow, add the fonts first. Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: the paste names them, and the Designer drops a font the site does not have.

4. Avoid the pitfalls

   • **Settings handed to mount() after the page loaded are dropped.** auto() mounts at DOM ready, and mount() on an element that already carries a menu hands back the existing one untouched. A page-wide block therefore goes in window.AnchoredMenuSettings, which auto() reads itself; handed to a later mount() call it is silently dropped, and the settings block ends up looking decorative.
   • Never give the box a width or a height, in CSS or from a script. At rest only the CSS decides its size: closed it hugs the bar, open it hugs the panel. The engine reads the two sizes at the click, writes sizes during the travel and removes every one of them when it lands. Put the open width on the panel, for example .panel { width: min(600px, calc(100vw - 40px)) }: a width on [data-anchored-menu] gives both states the same width, and the menu only drops down.
   • **overflow: hidden on the menu is what hides the panel at rest**: do not remove it to hang a drop shadow on the panel, everything would show.
   • The hairline between two rows sits on the mask, never on the link: the link moves inside its mask during the reveal, so a hairline carried by the link would ride up with it.
   • Keep the radius of the box a fixed length. A radius that stayed proportional to the box would open the corner as the box grows, which reads as a shape morphing into another one. A constant corner is what makes the two stages read as one rectangle. Hairlines stay at 1 px for the same kind of reason: a hairline that scales is no longer a hairline.
   • **backdrop-filter does not apply if an ancestor carries a filter or some kinds of overflow**: on a real site, keep the menu a direct child of body.
   • A button outside the menu opens it while the page holds a single menu. With several, keep each button inside its own menu, as snippet.html does, or give it aria-controls with the id of the menu, or keep it in the same section as the menu. A menu left without a button says so in the console.

One click on Copy the AI prompt copies everything an assistant needs to build this effect: the complete code, the markup, the dependency, every setting and every pitfall.