Hidden
Hide children below or above a breakpoint, or visually only.
Last updated
Shown from md up. Resize to see
Shown below md. Resize to see
Read by screen readers only
(a visually hidden item sits here)Show codeHide code
<Hidden below="md">Shown from md up</Hidden>
<Hidden above="md">Shown below md</Hidden>
<Hidden visually>Read by screen readers only</Hidden>Add
npx @ava-ui/apogee add hiddenNo Apogee dependencies.
Usage
---
import Hidden from '@/components/apogee/Hidden/Hidden.astro'
---
<Hidden below="lg"><Sidebar /></Hidden>
<Hidden above="lg"><MobileNav /></Hidden>API
@composable. Any other native attribute passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
below |
'sm' | 'md' | 'lg' | 'xl' |
— | Hidden on viewports narrower than the breakpoint. |
above |
'sm' | 'md' | 'lg' | 'xl' |
— | Hidden on viewports at or wider than the breakpoint. |
visually |
boolean |
false |
sr-only: removed from view, kept for assistive tech. |
as |
'div' | 'span' |
'div' |
Tag to render. |
class |
string |
— | Extra classes, merged last. |
Variants
hidden below smhidden below mdhidden below lghidden below xlhidden above smhidden above mdhidden above lghidden above xl
Show codeHide code
<Hidden below="sm">below sm</Hidden>
<Hidden below="md">below md</Hidden>
<Hidden below="lg">below lg</Hidden>
<Hidden below="xl">below xl</Hidden>
<Hidden above="sm">above sm</Hidden>
<Hidden above="md">above md</Hidden>
<Hidden above="lg">above lg</Hidden>
<Hidden above="xl">above xl</Hidden>Accessibility
- Breakpoint hiding uses
display: none: the content is removed for everyone at that size, including screen readers. Don’t hide the only route to a feature. visuallykeeps the content in the accessibility tree. Use it for labels that sighted users get from context.
Tokens
None. Breakpoints come from Tailwind’s --breakpoint-* scale.
Layout primitive, so no content rules.