Navigation
Ways to move between views, pages and filters: tabs, link tabs, segmented choices, tab strips that close, breadcrumbs, pagination, filter chips and the language controls. Built to WCAG 2.2 AA as a target, from 320px wide up.
11 pages, 12 exports
- Tabs
- TabPanel
- LinkTabs
- Segmented
- ClosableTabs
- Breadcrumbs
- Pagination
- FilterChips
- ChipCount
- LanguageSwitch
- LanguagePicker
- LanguageBanner
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { Tabs, TabPanel, LinkTabs, Segmented, … } from '@skribly/ui/navigation'Pages in this groupLink to the section Pages in this group
- TabsSwitches 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
- LinkTabsLooks like Tabs but each tab is a link to another page. Pick it for section navigation that changes the address.LinkTabs
- SegmentedOne choice out of two to five, all visible at once, such as a view mode or a period. For more options use a select.Segmented
- ClosableTabsA strip of open documents or pages that the reader can close, as in an editor or a browser. A dot marks unsaved changes and turns into the close button on hover or focus.ClosableTabs
- BreadcrumbsShows where a page sits and links to each level above it. With moreLabel set, long trails fold their middle levels into a menu.Breadcrumbs
- PaginationMoves through a long list split into pages. Pass getHref for real links that work without JavaScript, or onChange for buttons inside an app.Pagination
- FilterChipsQuick filters above a list, with an optional count on each. Multiple mode toggles each chip on its own; single mode picks one. ChipCount is the count badge, also used inside tabs.FilterChips, ChipCount
- ChipCountA small count next to a label: unread items, open issues or results. It caps long numbers, such as 99+.ChipCount
- LanguageSwitchA short row of language codes for a top bar. With onChange it switches in place; with href on each language it links to the same page in that language.LanguageSwitch
- LanguagePickerFinds a language in a long list by its own name, English name or code, with an optional field for any other code. Pick it for settings; use LanguageSwitch for two or three languages.LanguagePicker
- LanguageBannerTells the reader what happens to a translation: downloading, offline, failed or ready. It can repeat the message in a second language while the first is still missing.LanguageBanner