Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
fab-stack
Fixed action button stack positioned in the bottom-right corner. Stacks multiple floating buttons vertically.
Overview
The <fab-stack> element positions a vertical stack of floating action buttons in the bottom-right corner. Uses column-reverse so the first child (primary action) sits at the bottom and secondary actions stack above it.
Handles mobile safe-area insets for devices with notches or home indicators.
Usage
Settings + back-to-top
<fab-stack> <settings-panel></settings-panel> <a href="#" data-back-to-top aria-label="Back to top">↑</a></fab-stack>Place at the end of the page body, after the footer. The Vanilla Breeze doc site uses this pattern for the settings gear and back-to-top arrow.
CSS Tokens
| Token | Default | Description |
|---|---|---|
--fab-stack-bottom | var(--size-l) | Bottom offset from viewport |
--fab-stack-end | var(--size-l) | Inline-end offset from viewport |
--fab-stack-gap | var(--size-s) | Gap between stacked buttons |
Positioning
Uses position: fixed with safe-area handling:
Safe area support
fab-stack { inset-block-end: calc(var(--fab-stack-bottom) + var(--safe-bottom, 0px)); inset-inline-end: var(--fab-stack-end);}The pointer-events: none on the container with pointer-events: auto on children ensures only the buttons are clickable, not the invisible stack area.
With Back-to-Top
When [data-back-to-top] is inside fab-stack, its own fixed positioning is overridden to static so the stack controls placement.
Accessibility
- Each child button should have its own
aria-label - The stack is a visual grouping — no special ARIA role needed
- Back-to-top uses scroll-driven animation for visibility
Related
- page-tools — Page-level utility toolbar with FAB collapse
- site-tools — Site-wide utility container
- settings-panel — Full settings dialog