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 below
  • data-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:

@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:

<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:

<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.

<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: none are 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-visible to hide content that has no mobile equivalent — that would reduce accessibility on narrow screens
  • The hamburger button should include an aria-label since it typically contains only an icon