Content
- The words are “Skip to content”.
ExperimentalatomNavigation
SkipLink
“Skip to content”: the first keyboard stop on every page, jumping past the navigation.
import { … } from "@brdgapp/ui/components/skip-link"Usage
SkipLink is “Skip to content”: the first thing a keyboard user reaches on every page. It's hidden until it has focus, then appears top-left; Enter jumps past the top bar and sidebar to the page itself. Every app adds it once, first in the layout. The usual mistake is a <main> without id="main" and tabIndex={-1}, so the link has nowhere to land.
When to use
- Once, first inside <body>, in every Bridge app's root layout.
When not to use
- Inside a page, or more than once.
Keyboard first
Everything works with a keyboard alone, and people can always see where they are: a solid 2px ring on every focus stop, never outline-none without one in its place. Use real buttons and links, never a clickable <div>. Every app starts with SkipLink and has one <main>.
Anatomy
Skip to content
Link. A blue pill, “Skip to content”, top-left above everything (z 100). Off screen until it has focus.
Examples
Once it has focus
A picture of it over an app's top bar. The real one is on this page: press Tab once.
BridgeNetworkIntrosOutcomes
The page
States
| State | What happens |
|---|---|
| Hidden | Off screen, still first in the tab order. |
| Focused | Shows top-left with the focus ring. |
Behavior
- Jumps to
#mainby default; passhreffor another id. - The target needs
tabIndex={-1}so focus can land on it.
Do and don't
Do
Put it before the top bar.Don't
Put it after the navigation it's meant to skip.Accessibility
- A real link, so it works with every screen reader and keyboard.
- Only shows to people using the keyboard, who need it.
| Keys | Action |
|---|---|
| Tab | First stop on the page: shows the link. |
| Enter | Moves focus to the page's main content. |
API reference
SkipLink
Skip to content.
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | "#main" | Where it jumps: the id of the page's <main>. |
className | string | — | Layout only. |
Lineage
What it's built from and where it's used, read from the code. When you change it, check these too.
- Built from
- Nothing else in the package
- Used by components
- None
- Used in patterns
- None
- Used in templates
- None