All components
Skip Nav Link
An accessibility link that stays visually hidden until keyboard focus reveals it.
12345678910111213import { SkipNavLink } from "#components/ui/base-ui/skip-nav-link.tsx";
export function Example() { return ( <> {/* first element in the page; reveals itself on keyboard focus */} <SkipNavLink href="#main">Skip to content</SkipNavLink> <main id="main">{/* page content */}</main> </> );}
// composition: <SkipNavLink render={<Link href="#main" />}>…</SkipNavLink>Install
1npx stylexblocks add skip-nav-linkSource
components/ui/base-ui/skip-nav-link.tsx
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071import * as stylex from "@stylexjs/stylex";import { createComponent } from "#lib/base-ui/create-component.tsx";import { defineRecipe } from "#lib/recipe-props.ts";import { fontSizes } from '@stylexblocks/ui/tokens/font-sizes.stylex.ts'import { fontWeights } from '@stylexblocks/ui/tokens/font-weights.stylex.ts'import { lineHeights } from '@stylexblocks/ui/tokens/line-heights.stylex.ts'import { semanticColors } from '@stylexblocks/ui/semantic-tokens/colors.stylex.ts'import { semanticRadii } from '@stylexblocks/ui/semantic-tokens/radii.stylex.ts'import { spacing } from '@stylexblocks/ui/tokens/spacing.stylex.ts'
const skipNavLinkStyles = stylex.create({ base: { display: 'inline-flex', backgroundColor: semanticColors.bgPanel, padding: spacing._2_5, borderRadius: semanticRadii.control, fontWeight: fontWeights.semibold, clip: { default: 'rect(0 0 0 0)', ':focus-visible': 'auto', }, width: { default: '1px', ':focus-visible': 'auto', }, height: { default: '1px', ':focus-visible': 'auto', }, position: { default: 'absolute', ':focus-visible': 'fixed', }, top: { default: null, ':focus-visible': spacing._6, }, insetInlineStart: { default: null, ':focus-visible': spacing._6, }, fontSize: fontSizes.sm, lineHeight: lineHeights.sm, userSelect: 'none', border: 0, margin: '-1px', outline: 'none', overflow: 'hidden', },})
/** * SkipNavLink — recipe and component colocated in one file. Visually hidden * until keyboard focus reveals it; place it first in the page and point * `href` at the main content landmark (e.g. `href="#main"`). No variant * axes. Composition via `render`. */const skipNavLinkRecipe = defineRecipe({ styles: skipNavLinkStyles, axes: {}, defaultVariants: {},});
export const SkipNavLink = createComponent( "a", skipNavLinkRecipe, "SkipNavLink",);
export type SkipNavLinkProps = React.ComponentProps<typeof SkipNavLink>;