Components
- Accordion
- Action Bar
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context Menu
- Data List
- Date Picker
- Dialog
- Drawer
- Editable
- Field
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- Marquee
- Menu
- Native Select
- Number Input
- Pagination
- Popover
- Progress
- Prose
- QR Code
- Radio Group
- Rating
- Resizable
- Scroll Area
- Segment Group
- Select
- Separator
- Sheet
- Sidebar
- Signature Pad
- Skeleton
- Skip Nav
- Slider
- Spinner
- Status
- Steps
- Switch
- Table
- Tabs
- Textarea
- Timer
- Toast
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Skip to content
Main Content
This is the main content area. When users press Tab and then Enter on the skip link, focus jumps here.
Click on the "Preview" tab and use the tab key to see the skip to content link.
Installation
pnpm dlx shadcn@latest add https://shark.vini.one/r/skip-nav.json
Usage
- Place
<SkipNavLink />as one of the first focusable elements on the page. - Use
<SkipNavContent />to wrap your main content. It renders a div with an id that the link targets.
import { SkipNavContent, SkipNavLink } from "@/components/ui/skip-nav";
<SkipNavLink /> <nav>...</nav> <SkipNavContent /> <main>Your main content</main>
API Reference
SkipNavLink
| Prop | Type | Default |
|---|---|---|
id | string | "skip-nav-content" |
className | string | - |
asChild | boolean | false |
SkipNavContent
| Prop | Type | Default |
|---|---|---|
id | string | "skip-nav-content" |
className | string | - |
asChild | boolean | false |