A tabbed category module (“Don’t miss”): the title on a heavy rule, one tab per section at the end, and the tabs that don’t fit folded into a “More” menu — measured against the real width, so it adapts from a wide column to a phone. The selected tab always stays in the row. Panels come from props (server-rendered PostLayout) or from a load callback on first open, cached per tab. WAI-ARIA tabs on the kit Tabs: arrows, Home / End.
Don’t miss
The night tram returns: council votes to run the coast line until 2 a.m.
A twelve-month trial starts in March. Shift workers at the hospital and the port pushed for it for three years.
Installation
The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";
Usage
import { PostLayout, PostTabs } from "@vamos-ui/react/blocks";
<PostTabs
title="Don’t miss"
tabs={sections.map((s) => ({ id: s.id, label: s.label, content: <PostLayout layout="lead-list" posts={s.posts} /> }))}
/>
// Client-side data: panels without content load on first open
<PostTabs title="Lifestyle" tabs={[{ id: "all", label: "All", content: first }, { id: "travel", label: "Travel" }]}
load={async (id) => <PostLayout layout="lead-list" posts={await fetchSection(id)} />} />Examples
Lazy panels
The panel shows a card skeleton and aria-busy while load() runs; a failure shows a retry-later line.
Lifestyle
The night tram returns: council votes to run the coast line until 2 a.m.
A twelve-month trial starts in March. Shift workers at the hospital and the port pushed for it for three years.
API
PostTabs
| Prop | Type | Default |
|---|---|---|
titleModule title; names the region and the tab list. | ReactNode | — |
tabscontent: the panel (usually PostLayout). | { id; label; content? }[] | — |
defaultTab / value / onValueChangeUncontrolled or controlled selection. | string | — |
loadLoads panels without content, once each. | (id) => Promise<ReactNode> | — |
maxVisibleTabs shown before measuring (server render). | number | 5 |
loadingFallbackReplaces the card skeleton. | ReactNode | — |
headingLevelTitle level. | 2 | 3 | 2 |
locale / labels“More”, loading and empty strings (newsLabelsTr). | … | — |