ComponentsNavigation
Skip link
The first thing Tab reaches on every page. It jumps past the sidebar to the page's content, and stays hidden until it has focus.
Playground
Change the controls, then Tab into the preview to show the link. The code under the preview updates as you go and lists only the props you changed; copy it into your page.
Skip to content
Tab into the preview to show the link.
import { SkipLink } from '@/ui/skip-link';<SkipLink href="#content"> Skip to content</SkipLink>Hidden, then focused
Tab into the shell. The skip link is the first stop, shown over the sidebar in the top start corner. Enter moves focus to the page's main region, so the next Tab lands on its first control instead of the sidebar. Mouse users never see it.
Skip to content
People
Tab into this example: the first stop is Skip to content.
import { SkipLink } from '@/ui/skip-link';
export default function SkipLinkAppShell() {
return (
<div className="relative flex h-56 w-full max-w-lg overflow-hidden rounded-large bg-surface text-body leading-body shadow-control">
<SkipLink href="#people-content" />
<nav aria-label="Workspace" className="flex w-40 shrink-0 flex-col gap-025 border-e border-border bg-surface-sunken p-100">
<div className="flex h-12 items-center px-100 font-semibold text-text">Northbridge</div>
{['Inbox', 'People', 'Companies', 'Jobs'].map((item) => (
<a key={item} href={`#${item.toLowerCase()}`} className="rounded-medium px-100 py-050 font-medium text-text outline-none hover:bg-interaction-hovered focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-border-focused">
{item}
</a>
))}
</nav>
<div id="people-content" tabIndex={-1} className="flex min-w-0 flex-1 flex-col outline-none">
<div className="flex h-14 items-center border-b border-border px-200 text-heading-small font-semibold tracking-heading-small text-text">People</div>
<div className="p-200 text-text-subtle">Tab into this example: the first stop is Skip to content.</div>
</div>
</div>
);
}