BottomDrawer

<allegro-bottom-drawer> is a panel that rises from the bottom of the screen and sits over the page without blocking it, such as a donation or newsletter prompt. The reader can keep reading and scrolling, collapse the panel to a short bar, or close it.

The Bottom Drawer opens as soon as it renders. It has no delay, trigger or frequency options: the interaction that places it decides whether and when it shows. Once the reader dismisses it, it stays closed for the rest of the visit, and it reopens collapsed or expanded as the reader left it (see Remembering state for the visit). It never takes focus when it opens, never traps focus and never locks page scroll.

Usage

<allegro-bottom-drawer>
    <h2>Support Acme News</h2>
    <p>Your gift keeps local reporting free for everyone.</p>
    <a href="/donate">Donate</a>
</allegro-bottom-drawer>

A Bottom Drawer that can collapse to a one-line bar, and starts collapsed:

<allegro-bottom-drawer collapsed>
    <h2>Support Acme News</h2>
    <p>Your gift keeps local reporting free for everyone.</p>
    <a href="/donate">Donate</a>

    <div slot="collapsed">
        <p>Support Acme News</p>
        <button type="button" data-allegro-expand>Donate</button>
    </div>
</allegro-bottom-drawer>

The panel always spans the width of the screen, up to a maximum width set in Branding. Its height follows the content up to --bottomDrawer--max-height, and taller content scrolls inside the panel. The component does not lay out its content. Style the slotted markup in the template's CSS field.

Accessibility

The Bottom Drawer is a labelled region, so screen reader users can reach it from the landmarks list. It names itself from the first of these that exists:

1. The label attribute.
2. An element in its content marked data-allegro-title.
3. The first h1–h6 in its content.

When it opens, it announces itself once, politely, as "{name}, panel opened at the bottom of the page", where {name} is its accessible name. It does not announce collapse or expand: the toggle's aria-expanded covers that. The toggle is named "Collapse" or "Expand", and the close button, when there is one, "Close".

While it is on the page, the Bottom Drawer sets scroll-padding-bottom on the page to its own height, so an element the reader tabs to is not hidden under the panel. It restores the page's previous value when it closes.

When the Bottom Drawer closes with focus inside it, focus returns to the element on the page the reader came from, so keyboard users don't land at the top of the page.

When a collapse or expand hides the element that has focus, such as a data-allegro-expand button in the collapsed bar, focus moves to the toggle.

Closing

Every close records a method, which says how the Bottom Drawer was closed. It is sent with the dismiss_bottom_drawer event and the allegro:bottom-drawer:closed event.

Method	Cause
escape	The reader presses Escape while focus is inside the Bottom Drawer.
close-button	The reader clicks the built-in close button.
action	A click on or inside a data-allegro-close element, or a slotted form's Continue button.
api	close() or the allegro:bottom-drawer:close event.

The Bottom Drawer does not close when the reader logs in.

const bottomDrawer = document.querySelector('allegro-bottom-drawer');

bottomDrawer.collapse();
bottomDrawer.expand();
bottomDrawer.close();

With dismissible="false", the Bottom Drawer has no close button and ignores Escape, so only action and api closes happen. Give it a data-allegro-close button or a form so the reader can still close it.

<allegro-bottom-drawer dismissible="false">
    <h2>Support Acme News</h2>
    <p>Your gift keeps local reporting free for everyone.</p>
    <a href="/donate" data-allegro-close>Donate</a>
    <button type="button" data-allegro-close>Maybe later</button>
</allegro-bottom-drawer>

Remembering state for the visit

When an interaction places the Bottom Drawer, it remembers what the reader did until the browser closes:

Reader action	On later pages in the same visit
Closes it	It doesn't open, so it doesn't announce itself or track view_bottom_drawer.
Collapses it	It opens collapsed, even without the collapsed attribute.
Expands it	It opens expanded, even with the collapsed attribute.
Nothing remembered	It opens collapsed or expanded as the collapsed attribute says.

Every close method counts, and so do collapse() and expand() calls from site code.

• Each interaction is remembered separately, by its slug. Closing one interaction's Bottom Drawer does not hide another's.
• The state is kept in a session cookie named allegro_bottom-drawer_{slug}, shared across tabs and set on your organization's cookie domain when it has one.
• A Bottom Drawer that your site's code or theme renders directly, rather than through an interaction, has no slug and remembers nothing.

To see a closed Bottom Drawer again while testing, close the browser or delete its cookie.

note

The interaction still runs on later pages, so its frequency caps still count those deliveries even though the Bottom Drawer does not show.

Attributes

Components read their attributes once, when they connect. Changing collapsed after the Bottom Drawer opens has no effect: use expand() and collapse().

Attribute	Type	Default	Description
collapsed	boolean	false	Start collapsed. Ignored when there is no collapsed slot, and when the reader already collapsed or expanded it earlier in the visit. The component then keeps the attribute in step with the current state.
dismissible	boolean	true	Show the close button and close on Escape. Turn off to keep the Bottom Drawer open until a data-allegro-close element, a slotted form's Continue button or site code closes it.
label	text	(empty)	Accessible name. Overrides the title element and the first heading.
tracking-data	text	(empty)	JSON object of custom data merged into every tracked event, e.g. "{'campaign': 'donate'}".

States

State	Trigger	Description
Expanded	Opening without collapsed or after the reader expanded it earlier in the visit, the toggle, data-allegro-expand, expand()	Shows the default slot.
Collapsed	Opening with collapsed or after the reader collapsed it earlier in the visit, the toggle, collapse()	Shows the collapsed slot as a short bar.

Only the toggle button collapses or expands the panel. Clicks elsewhere in the panel do not.

Slots

Slot	Appears in	Description
(default)	Expanded	The expanded content.
collapsed	Collapsed	The short bar. Without it, the Bottom Drawer cannot collapse and shows only the close button, or no controls with dismissible="false".

<div slot="collapsed">
    <p>Support Acme News</p>
    <button type="button" data-allegro-expand>Donate</button>
</div>

Events

Dispatched

Event	Bubbles	Detail	Description
allegro:bottom-drawer:open	yes	(none)	Fired on the element once the Bottom Drawer opens.
allegro:bottom-drawer:toggle	yes	{ collapsed: boolean }	Fired on the element after each collapse or expand.
allegro:bottom-drawer:closed	no	{ method: string }	Fired on window once the Bottom Drawer has been removed.

Listened to

Event	Detail	Description
allegro:bottom-drawer:close	(none)	Dispatch on the element, or from inside it, to close it.
allegro:content-gate:close	(none)	A slotted Email Form's Continue button closes the Bottom Drawer.
allegro:login-form:continue	(none)	A slotted Login Form's Continue button closes the Bottom Drawer.

document
    .querySelector('allegro-bottom-drawer')
    .dispatchEvent(new CustomEvent('allegro:bottom-drawer:close'));

Tracked Events

The component records the following events via the Allegro SDK.

Event	When	Data
view_bottom_drawer	Fired when it opens.	{ collapsed: boolean }
dismiss_bottom_drawer	Fired when it closes.	{ collapsed: boolean, method: string }
collapse_bottom_drawer	Fired when the reader collapses it with the toggle.	(none)
expand_bottom_drawer	Fired when the reader expands it with the toggle or a data-allegro-expand element.	(none)

expand() and collapse() dispatch allegro:bottom-drawer:toggle but are not tracked, so changes made from site code don't count as reader actions.

CSS Variables

Set the variables in the template's CSS field. All of them can also be set for your whole organization in Branding.

allegro-bottom-drawer {
    --bottomDrawer--background: #fffaf0;
    --bottomDrawer--max-width: 48rem;
}

Don't set them with a style attribute on the element. Components accept only their own attributes and log an error for style, class and id.

Defaults written below as u(n) mean n times --bottomDrawer--base-font-size, the component's sizing unit: u(0.5) is half that unit, u(1.5) is one and a half. The unit defaults to --allegro--font-size, then the page's rem. If the host page sets a root font-size other than the usual 16px, pin it so the Bottom Drawer sizes the same either way:

allegro-bottom-drawer {
    --bottomDrawer--base-font-size: 16px;
}

Panel

Variable	Default	Description
--bottomDrawer--base-font-size	var(--allegro--font-size, 1rem)	Base sizing unit for the component.
--bottomDrawer--background	#fff	Panel background. Falls back to --allegro--color-background.
--bottomDrawer--color	#000	Panel text color. Falls back to --allegro--color-text.
--bottomDrawer--font-family	(none)	Panel font family. Falls back to --allegro--font-family.
--bottomDrawer--padding	u(1.5)	Padding around the content.
--bottomDrawer--border-radius	u(0.375)	Radius of the top corners. Falls back to --allegro--radius.
--bottomDrawer--max-width	u(64)	Maximum panel width. Use none with a 0 gutter for an edge-to-edge bar.
--bottomDrawer--max-height	calc(100dvh - u(3))	Maximum panel height. Leaves a strip of page visible above it.
--bottomDrawer--gutter	u(1)	Space between the panel and the sides of the screen.
--bottomDrawer--z-index	9997	Stacking order.
--bottomDrawer--transition-duration	0.35s	Length of the slide animation. Capped at 0.15s under reduced motion.

Close button

These also size and color the collapse and expand toggle.

Variable	Default	Description
--bottomDrawer--close--size	u(2.5)	Width and height.
--bottomDrawer--close--color	currentColor	Icon color.

Buttons in your content

The Bottom Drawer does not style your buttons. It resolves a button color for you to use in the template's CSS, from --bottomDrawer--button--background and --bottomDrawer--button--color, then the global button tokens.

Variable	Default	Description
--bottomDrawer--button--background	#000	Set in Branding. Read it as var(--bottom-drawer-button-background) in template CSS.
--bottomDrawer--button--color	#fff	Set in Branding. Read it as var(--bottom-drawer-button-color) in template CSS.

Parts

Style the component's own elements with ::part().

Part	Element
panel	The panel.
body	The area around the expanded content.
collapsed	The area around the collapsed bar.
controls	The group of buttons in the top corner.
toggle	The collapse and expand button.
close	The close button. Not rendered with dismissible="false".

Motion

The panel slides up from below the screen and slides back down on close. When the reader has asked for reduced motion, it only fades. Browsers without @starting-style show it without animation.

Example: Edge-to-edge bar

allegro-bottom-drawer {
    --bottomDrawer--gutter: 0;
    --bottomDrawer--max-width: none;
    --bottomDrawer--border-radius: 0;
    --bottomDrawer--background: #1f2937;
    --bottomDrawer--color: #f9fafb;
}