Photo Tabs
betaA photo with a floating bar of icon tabs; each tab swaps the photo.
- Display
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add photo-tabsnpm packages installed: class-variance-authority.
import { PhotoTabs } from "@/components/ui/photo-tabs";Default
Gallery
Always Visible Bar
Bar On Top
<PhotoTabs>
| Prop | Type | Default |
|---|---|---|
tabs (required) | PhotoTab[] | — |
barPosition | "bottom" | "top" | "bottom" |
heightHeight of the photo — a number of pixels or any CSS length. | number | string | "25rem" |
imageClassName | string | — |
listClassName | string | — |
listLabelAccessible name for the tab list. | string | "Photos" |
revealOnHoverTuck the bar away until hover or focus on devices with a fine pointer. | boolean | true |
triggerClassName | string | — |
Built on Dowel's Tabs: the ARIA tabs pattern with roving focus, arrow keys, Home/End and focusable panels. The tab list is named by `listLabel`; each icon-only tab carries its label as visually hidden text and the icon is aria-hidden. Each panel's image has alt text (defaulting to the label). With a fine pointer the bar hides until the photo is hovered or anything inside it has focus, so keyboard users always see it; on touch it is always visible. The hover pill is aria-hidden and its movement stops under reduced motion.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes