DocsComponents
Category tabs
Each category keeps its own colour in every control.
- 1Tab: top corners rounded 16 px, min. height 42 px (44 px below 1024 px)
- 2Icon box 24 px: 20 px category glyph at rest; when selected, the 24 px category circle grows in behind it
- 3Label 12 / 600 (14 px from 1280 px); below 1280 px only the selected tab shows its label
- 4Selected: background in the category tint (8 %) and an inner cut-out shade from the top and sides
Variants
Each category keeps its own colour: hover and selection paint with the category, never with the system accent. “All activities” is the exception: chartreuse circle on a deep-blue-50 background.
All activities 6.8:1 
Events 5.0:1 
Places 7.1:1 
Education 6.7:1 
Sports 7.4:1 
Food 7.0:1 
Arts 5.5:1 
Health 9.5:1 States
Forced below for one category (Sports). The live bar above reacts to the real pointer and keyboard; selection animates the circle in over 300 ms.
API reference
Props of CategoryTabBar.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | – | Accessible name of the nav landmark (aria-label). |
items | list of tabs | – | Each tab: href, label, category, circleSrc (24 px circle, shown when selected), glyphSrc (20 px glyph, shown otherwise), current. |
items[].category | "all" | "education" | "sport" | "art" | "events" | "places" | "gastronomy" | "health" | – | Sets data-cat on the tab: hover and selection take this category’s colour. |
items[].current | boolean | false | The tab for the current address; rendered with aria-current="page". |
link | link component | – | Router link injected by the app; each tab is a real link. |
lead | ReactNode | – | Element before the tabs, e.g. the “More filters” trigger. |
Accessibility
- A category is a part of the address, so each tab is a link with aria-current="page" inside a labelled nav, not a tablist: Back returns to the previous category, a tab opens in a new browser tab, search engines see the addresses.
- Hidden labels below 1280 px are collapsed visually only; screen readers still read every tab name.
- Touch target: 44 px high below 1024 px; focus ring 3 px in the ring token, drawn inside the tab.
- Labels stay in the foreground colour on every tint (17.7–19.5:1); the selected tab on hover turns deep blue (7.4–8.1:1).
- Category ink on category background: 5.0:1 (events) to 9.5:1 (health), all above AA for text.
- Icons are decorative (aria-hidden); the category is named by the label.
