Focus Blur Links
betaA row of links where hovering or focusing one blurs and dims the rest, with an optional dashed bracket.
- Navigation
- 1 file
- 2 npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add focus-blur-linksnpm packages installed: class-variance-authority, radix-ui.
import { FocusBlurLinks } from "@/components/ui/focus-blur-links";Default
Gallery
Without Brackets
<FocusBlurLinks>
| Prop | Type | Default |
|---|---|---|
blurAmountBlur applied to the other links, in pixels. | number | 4 |
dimOpacityOpacity of the other links, from 0 to 1. | number | 0.4 |
showBracketsDraws a dashed bracket around the emphasised link. | boolean | true |
size | "sm" | "md" | "lg" | "md" |
Plus every attribute of <div>.
<FocusBlurLink>
| Prop | Type | Default |
|---|---|---|
asChildRenders the child element — a router | boolean | false |
Plus every attribute of <a>.
Every item is a real link (or your router's link via asChild). Keyboard focus triggers the same emphasis as hover and holds it after the pointer leaves; focus from a click does not. The blur is visual only — dimmed links stay in the accessibility tree and remain focusable. Wrap the row in a <nav aria-label> when it is site navigation.
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