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.
site-tools
Site-wide utility container for header and footer actions like search, theme picker, and settings.
Overview
The <site-tools> element is a flex container for site-wide utility controls. It uses margin-inline-start: auto to push itself to the trailing edge of flex parents like <header class="site">.
It parallels <page-tools> which handles page-level utilities. Use <site-tools> for controls that appear on every page: search, theme picker, settings, account menus.
Basic Usage
Site tools in header
<header class="site"> <a href="/"><brand-mark>Acme Inc</brand-mark></a> <nav class="horizontal pills" aria-label="Main navigation"> <ul> <li><a href="/about">About</a></li> <li><a class="active-parent" href="/docs">Docs</a></li> </ul> </nav> <site-tools> <site-search> <button type="button" data-trigger="" class="ghost">Search</button> </site-search> <theme-picker compact=""> <button type="button" data-trigger="" class="ghost">Theme</button> </theme-picker> </site-tools></header>In a Footer
Use <site-tools> in footers to wrap settings or utility panels.
Site tools in footer
<footer> <a href="/"><brand-mark>Acme Inc</brand-mark></a> <site-legal> <span>© 2026 Acme Inc</span> <span>MIT License</span> </site-legal> <site-tools> <settings-panel></settings-panel> </site-tools></footer>CSS Tokens
The element uses standard VB spacing tokens. Override gap with --size-s on the element or a parent.
Accessibility
No special ARIA requirements. The element is a generic flex container. Individual tools within it (search, theme picker) handle their own accessibility.
Related
- brand-mark — Brand logo display
- site-legal — Legal content container
- mobile-menu — Responsive mobile navigation
- page-tools — Page-level utility toolbar