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.
data-visible
Responsive visibility utility. Show or hide elements based on viewport width without writing custom media queries.
Overview
The data-visible attribute controls element visibility based on viewport width. It eliminates the need for custom @media queries when toggling between desktop and mobile layouts.
data-visible="desktop"— visible at 48 rem and above, hidden belowdata-visible="mobile"— visible below 48 rem, hidden at 48 rem and above
The breakpoint (48 rem) corresponds to a typical tablet/desktop threshold. Because the rules live in the utils cascade layer, they override styles from earlier layers (tokens, reset, native-elements, custom-elements, web-components) without needing !important.
How It Works
Two media queries set display: none on the opposite breakpoint:
The complete CSS
@media (width >= 48rem) { [data-visible="mobile"] { display: none; }} @media (width < 48rem) { [data-visible="desktop"] { display: none; }}Works on any element — not just navigation. A hamburger button, a bottom nav, a sidebar, a CTA banner, or any content block can use data-visible.
Desktop-Only Content
Use data-visible="desktop" on elements that should disappear on narrow viewports:
Desktop-only navigation
<nav class="horizontal" data-visible="desktop" aria-label="Main"> <a href="#" aria-current="page">Home</a> <a href="#">Features</a> <a href="#">Pricing</a></nav>Mobile-Only Content
Use data-visible="mobile" on elements that should only appear on narrow viewports:
Mobile-only elements
<button data-visible="mobile" commandfor="mobile-nav" command="show-modal" class="ghost icon-only" aria-label="Menu"> <icon-wc name="menu"></icon-wc></button> <nav class="bottom" data-visible="mobile" aria-label="Quick navigation"> <ul> <li><a href="#" aria-current="page"><icon-wc name="home"></icon-wc> Home</a></li> <li><a href="#"><icon-wc name="star"></icon-wc> Features</a></li> <li><a href="#"><icon-wc name="tag"></icon-wc> Pricing</a></li> </ul></nav>Responsive Nav Pattern
The most common use case: toggle between a horizontal desktop nav and a hamburger + bottom tab bar on mobile. No custom media queries needed.
Complete responsive nav pattern
<header> <!-- Desktop: horizontal nav links --> <nav class="horizontal" data-visible="desktop" aria-label="Main"> <a href="#">Home</a> <a href="#">Features</a> <a href="#">Pricing</a> </nav> <!-- Mobile: hamburger button --> <button data-visible="mobile" commandfor="mobile-nav" command="show-modal" class="ghost icon-only" aria-label="Menu"> <icon-wc name="menu"></icon-wc> </button></header> <!-- Mobile: bottom tab bar --><nav class="bottom" data-visible="mobile" aria-label="Quick navigation"> <ul> <li><a href="#" aria-current="page"><icon-wc name="home"></icon-wc> Home</a></li> <li><a href="#"><icon-wc name="star"></icon-wc> Features</a></li> <li><a href="#"><icon-wc name="tag"></icon-wc> Pricing</a></li> </ul></nav>See the responsive nav demo for a full working example.
Values
| Value | Visible | Hidden |
|---|---|---|
desktop |
≥ 48 rem | < 48 rem |
mobile |
< 48 rem | ≥ 48 rem |
Accessibility
- Elements hidden with
display: noneare removed from the accessibility tree — screen readers will not announce them - Ensure equivalent content is available at both breakpoints; hiding a desktop nav is fine when a mobile nav provides the same links
- Do not use
data-visibleto hide content that has no mobile equivalent — that would reduce accessibility on narrow screens - The hamburger button should include an
aria-labelsince it typically contains only an icon