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.
Sticky Share Bar
Vertical share rail beside an article that follows the reader. Pure position: sticky composition, no JS, no scroll listeners.
Overview
A vertical rail of share buttons that sticks to the side of an article as the reader scrolls. The rail releases naturally when the article ends because position: sticky respects its containing block.
Anatomy:
- A grid container with rail · body · gutter columns
- The rail is
position: stickywithalign-self: start inset-block-startsets the offset from the viewport edge- At narrow widths the rail flips to a horizontal bar above the article
HTML
Article with sticky share rail
<article class="post"> <nav class="share-rail" aria-label="Share"> <a href="#" data-platform="x" aria-label="Share on X">𝕏</a> <a href="#" data-platform="linkedin" aria-label="Share on LinkedIn">in</a> <a href="#" data-copy="https://example.com/post" aria-label="Copy link">🔗</a> </nav> <div class="post-body"> <h1>Post title</h1> <p>...long-form content...</p> </div> <aside></aside></article>CSS
Grid layout + sticky rail
article.post { display: grid; grid-template-columns: auto minmax(0, 60ch) 1fr; gap: var(--size-l); padding: var(--size-l); max-inline-size: 80rem; margin-inline: auto;} .share-rail { position: sticky; inset-block-start: var(--size-l); align-self: start; display: flex; flex-direction: column; gap: var(--size-s);} @media (max-width: 50rem) { article.post { grid-template-columns: 1fr; } .share-rail { flex-direction: row; inset-block-start: 0; }}Composing with VB's clipboard utility
The copy-link button in the demo uses data-copy from VB's clipboard system — no per-page JS, automatic data-state="copied" feedback, screen-reader announce. See data-copy.
For a full share component with platform-specific share URLs and the Web Share API, use <share-wc> instead of rolling your own anchors.
Notes
align-self: startis what keeps the rail pinned at the top. Without it the rail stretches to the article's height and never sticks.- The third column (
aside) is intentionally empty in the demo — it gives the article a centred feel by claiming the right gutter. Drop it if you don't need symmetry. - No
overflow: hiddenon any ancestor — same sticky caveat as everywhere. - If the body is shorter than the viewport, the rail won't appear to stick (there's nothing to scroll). That's correct.