Panel configuration

Where the content sits inside the clipped container while it animates. Handy for panels that reveal from the centre or the far edge.

Default: 'start'

Move focus into the panel when it opens, so a screen-reader user knows the content has changed.

• false: no focus movement
• true: focus the panel element itself
• 'heading': focus the first h1-h6
• 'first': focus the first focusable element (keyboard events only)
• 'input': focus the first input/select/textarea (bypasses keyboard check)

Pass the original event to open() or toggle() and Panel tells keyboard from mouse: a mouse click skips autofocus, which keeps the page from jumping.

Default: false

Which dimension animates: vertical grows the height, horizontal grows the width.

Default: 'vertical'

Close the panel when the window resizes. Useful for horizontal panels, whose surrounding layout can break at other viewport widths.

Default: false

When this panel opens, close any other open panel in the same [data-panel-group]. You can also set it on the group element with data-panel-close-siblings.

Default: false

Log open and close events to the console. Handy when something is opening that shouldn’t be, quiet otherwise.

Default: false

Keep the ?panel= URL param in sync as the panel opens and closes (via history.replaceState, so no new history entries pile up). The address bar then always reflects the current state, ready to copy and share. Reading the param on load happens regardless: deepLink only decides whether opening and closing write back to it. Want shareable URLs and localStorage restore? Turn on persist and deepLink together.

Default: false

The panel needs an id, or there is nothing to put in the URL.

Leave it on. With it off, any open or close that arrives mid-animation or mid-load is dropped, and the one already running finishes first.

Default: true

How long to wait before showing the spinner while async content loads. It prevents spinner flash on fast connections.

Default: 320

The height, in pixels, the panel holds while async content loads. Somewhere for the spinner to live until the real content turns up.

Default: 150

Save the panel’s open or closed state to localStorage on every change, and restore it on the next load, so the panel comes back the way the user left it.

You can also set it on a [data-panel-group] to cover every direct panel in the group, instead of marking each one.

Default: false

The panel needs an id, or there is nothing to key the storage on.

When the panel closes, send focus back to the trigger that opened it, so a keyboard user picks up where they were.

Default: true

Make the panel plain expanded content instead of a collapsible disclosure. A Panel is collapsible, so you only ever set this to say otherwise.

The useful value is a media query: the panel is then a disclosure only while that query does not match, and plain content while it does. That is a responsive navigation in one attribute: a drawer on mobile, an ordinary sidebar on desktop.

<div id="main-nav" data-panel data-panel-static="(min-width: 769px)">
	<div class="panel-wrapper">...</div>
</div>

While static the panel is expanded and reachable: no inert, no open or close, and its trigger stops claiming to expand anything (aria-expanded is removed). open(), close() and toggle() do nothing, persist and deepLink do not write, and closeSiblings cannot close it. Crossing the breakpoint never animates. Becoming collapsible again lands the panel closed, because a drawer that reappears already open over your content is never what you want.

The library adds data-ps-static to the panel and to its triggers while static. A trigger for a static panel cannot do anything, so the stylesheet hides it for you: no menu button on desktop, and no breakpoint repeated in your CSS. To keep the button visible and repurpose it, repeat the attribute (the rule that hides it does the same, so that a plain .sidebar button rule in your own CSS cannot out-rank it by accident):

button[data-ps-static][data-ps-static] {
	display: revert;
}

If the panel holds something that has to be there whatever happens, open it yourself in CSS, for the same screens, so the browser can paint it before the library has even loaded:

@media (min-width: 769px) {
	/* Your panel, before the library has marked it static. */
	[data-panel-static]:not([data-ps-static]) {
		height: auto;
		width: auto;
		overflow: visible;
	}
	[data-panel-static]:not([data-ps-static]) > .panel-wrapper {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

Use the same media query you wrote in data-panel-static. As soon as the library loads it adds data-ps-static, your rule stops matching, and the library’s rule takes over with the very same values, so nothing moves.

For a breakpoint the library cannot see (a container query, your own breakpoint system, a feature flag), drive it yourself with panel.setStatic(true) and read panel.isStatic. A panel:staticchange event fires on every switch, with detail.static.

Default: false

Turn the CSS size animation on or off.

Default: true