Panel Stack — @magic-spells

The classic — a mobile menu.

Tap a row with a chevron to drill in. The current panel slides off, the next slides in, and the inactive ones blur slightly into the background. Hit the back arrow to unwind one level at a time.

About Journal

Account

Sign in Help & support

New arrivals Sale

Tops Bottoms Outerwear Shoes

Shirts Trousers Jackets Footwear

Midi Maxi Mini Evening

Summer ’26 Archive Capsule

<panel-stack initial="menu-root">
  <stack-panel handle="menu-root">
    <button data-action-stack-push target="menu-shop">Shop</button>
  </stack-panel>
  <stack-panel handle="menu-shop">
    <button data-action-stack-pop>Back</button>
  </stack-panel>
</panel-stack>

Settings, the way they should feel.

Same component, different content. Here panels carry icon-prefixed rows, decorative toggles, and value displays — proving the stack stays out of your way and lets the content speak.

About v17.4

Auto-correction

Caps lock

Active

English (United States) ✓

Available

Français

Deutsch

Español

日本語

Predictive text

Smart punctuation

Slide to type

Dark mode

Auto-brightness

Bold text

Small

Default✓

Large

Extra large

Ringer & alerts 75%

Change with buttons

Haptics

Show previews When unlocked

Scheduled summary

Location services

Analytics

A wizard, walking forward.

Steppers are just stacks where you only call push. Each step hits a "Continue" button to advance, or "Back" to retreat one level. The Confirm step calls reset() to return to the start when you submit.

Step 1 of 4

Create your account

Start with your name and email — we'll never share it.

Full name

Email

Step 2 of 4

Tell us about you

A few details so we can tailor the experience.

Role

Company (optional)

Step 3 of 4

Pick your preferences

You can change these later.

Send me product updates Weekly digest Beta features

Step 4 of 4

Looks good?

Tim Cook · hi@example.com

Frontend developer at Magic Spells

Subscribed to product updates and the weekly digest

Tune the feel of it.

Every part of the motion is exposed as a CSS custom property. Drag the sliders to change the slide distance, blur amount, horizontal scale, easing duration, and the opacity of inactive panels. Push and pop to feel the difference.

A child item

Another child

Deepest item

Item one

Item two

Item three

Quiet content

Duration 420ms

Blur 2px

Scale X 1.00

Offset 100%

Inactive opacity 0.30

Transition

Presets

Listen in.

Every push, pop, and reset fires a bubbling, composed CustomEvent. Push events are cancelable — call e.preventDefault() in a panel-stack:push handler to abort navigation. Try clicking around the panel; the log on the right captures every event.

Leaf node.

Bottom of the well.

// waiting for events…

stack.addEventListener('panel-stack:push', (e) => {
  console.log(e.detail) // { fromHandle: 'evt-root', toHandle: 'evt-one' }
})

// cancelable — preventDefault() aborts the push
stack.addEventListener('panel-stack:push', (e) => {
  if (e.detail.toHandle === 'evt-deep') e.preventDefault();
})

Or let the parent drive.

Set current to the handle you want and the stack works out the move on its own — push, pop back through the ancestry, or reset to root. It writes the attribute back after every navigation, including the ones you didn't start, so the value on the element is always the truth. Unknown handles and cancelled pushes are restored. panel-stack:change fires once the stack has settled — that's the one to sync parent state from, since push and pop fire before the move.

Bottom of the tree.

Pushes here are cancelled — you should never see this.

// waiting for events…

current="ctl-root"

<!-- controlled: the attribute is the input AND the output -->
<panel-stack initial="ctl-root" current="ctl-shop"> … </panel-stack>

stack.current = 'ctl-dresses'; // two levels down → pushes
stack.current = 'ctl-shop';    // an ancestor → one pop per level
stack.current = 'ctl-root';    // the root → reset()
stack.current = 'nope';        // unknown → ignored, attribute restored

// sync back — fires after the stack settles, for every source
stack.addEventListener('panel-stack:change', (e) => setState(e.detail.handle));

The whole API, on one screen.

Two elements, three methods, three events, eight CSS custom properties. That's everything.

Elements & attributes

Element / attribute

On

Description

<panel-stack>

—

Root container managing the stack

initial

panel-stack

Handle of the panel to start on (default: first child)

current

panel-stack

Controlled · handle that should be current. Write it to navigate; the component writes it back after every push / pop / reset

<stack-panel>

—

One panel in the stack

handle

stack-panel

Identifier used by push() / pop()

data-action-stack-push

any descendant

Click trigger that calls push() with the target attribute

target

push trigger

Handle of the panel to push to

data-action-stack-pop

any descendant

Click trigger that calls pop()

data-stack-focus

any descendant

First focusable target when its panel becomes current

Methods & getters

Name

Returns

Description

push(handle)

boolean

Slide to the named panel · returns false if cancelled or unknown

pop()

boolean

Pop the top panel · false if at root

reset()

void

Collapse the stack to root

current

string

Get / set · reads the current handle, writing it navigates (same as the attribute)

currentHandle

string

Read-only · top of the stack

currentPanel

StackPanel

Read-only · the visible <stack-panel> element

depth

number

Read-only · stack length (root = 1)

Events

Event

Cancelable

Detail

panel-stack:push

yes

{ fromHandle, toHandle }

panel-stack:pop

no

{ fromHandle, toHandle }

panel-stack:reset

—

{ rootHandle }

panel-stack:change

—

{ handle } · fires after the stack settles

CSS custom properties

Property

Default

Description

--ps-transition-duration

420ms

Slide animation duration

--ps-transition-timing

cubic-bezier(0.16, 0.87, 0.64, 1)

Easing for the slide

--ps-blur-duration

280ms

Separate timing for the blur fade

--ps-perspective

1200px

Depth of the 3D scene

Per-state values

Each state (current, previous, next) has its own translate, scale, blur, and opacity custom property. Override the ones for a single state to break symmetry — e.g. make panels exit faster than they enter.

Property pattern

Defaults

Notes

--ps-translate-{state}

0% · calc(-100% - 50px) · calc(100% + 50px)

X-axis translate per state

--ps-scale-x-{state}

1 · 1.1 · 1.1

Horizontal scale per state (values > 1 stretch, < 1 shrink, negative flips)

--ps-blur-{state}

0px · 2px · 2px

Filter blur per state

--ps-opacity-{state}

1 · 0.3 · 0.3

Opacity per state

Browser support

Modern browsers with custom elements + the inert attribute. Works in Chrome 102+, Firefox 112+, Safari 15.5+, Edge 102+. Honors prefers-reduced-motion: reduce by suppressing the scale, blur, and transition.