Tabs
Switches between panels of one view without leaving the page. Pick it when the panels belong together; use LinkTabs when each tab is its own address.
- Tabs
- TabPanel
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Tabs
The board groups issues by status.
Profile
Notifications and email digests
Security
Name, photo and language.
Dark theme, Tabs
The board groups issues by status.
Profile
Notifications and email digests
Security
Name, photo and language.
High contrast theme, Tabs
The board groups issues by status.
Profile
Notifications and email digests
Security
Name, photo and language.
UsageLink to the section Usage
import { Tabs, TabPanel } from '@skribly/ui/navigation'<Tabs label="Project sections" tabs={[{ id: 'board', label: 'Board' }, { id: 'list', label: 'List', count: 12, countLabel: '12 issues' }]}>
<TabPanel id="board">…</TabPanel>
<TabPanel id="list">…</TabPanel>
</Tabs>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Tab enters the tab list on the selected tab; Left and Right (Up and Down when vertical), Home and End move and select; Tab again moves into the panel.
- Screen readers hear tab, position and selected state, and the panel is labelled by its tab.
- The underline is painted in Highlight under forced colours.
- The strip scrolls on its own when tabs do not fit, and vertical tabs stack above the panel on narrow screens.
This demo runs through axe in all three themes on every test run. See what the tests check.