TabsNavigation
Abas de navegação entre telas ou filtros de uma lista. Diferente das Tabs do shadcn, que trocam painéis na mesma página, cada item aqui é um link (com href) ou um botão, e o ativo recebe aria-current=page. A faixa rola na horizontal quando falta espaço e traz o item ativo para a vista.
Sublinhado com contagem
O padrão para o topo de uma lista. count mostra quantos itens há em cada aba.
4 envelopes aguardam a sua assinatura.
Pílula
variant="pill" para trocar a visão dentro de um cartão. fullWidth divide a largura igualmente.
Muitas abas
Em telas estreitas a faixa rola na horizontal sem barra de rolagem visível. Itens com disabled ficam apagados e fora do foco.
Como links
Com href, cada item vira um <a> comum. Para trocar de página sem recarregar, intercepte o clique em onValueChange e navegue pelo roteador do app; routeClick só intercepta o clique simples, então Ctrl/⌘+clique segue abrindo em nova aba.
Uso
const pathname = usePathname();
const router = useRouter();
<TabsNavigation
aria-label="Caixas de envelopes"
value={pathname}
onValueChange={(value, event) => routeClick(event, value, router.push)}
items={[
{ value: "/envelopes/inbox", label: "Para assinar", href: "/envelopes/inbox", count: 4 },
{ value: "/envelopes/sent", label: "Enviados", href: "/envelopes/sent" },
]}
/>Props
TabsNavigationItem = { value, label, href?, icon?, count?, disabled? }.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| items | TabsNavigationItem[] | — | Abas na ordem de exibição. |
| value | string | — | value do item ativo. |
| onValueChange | (value: string, event: MouseEvent) => void | — | Chamado no clique de um item habilitado. Com href, use event.preventDefault() (ou routeClick) para navegar sem recarregar. |
| aria-label | string | — | Nome do bloco de navegação. Obrigatório. |
| variant | "underline" | "pill" | "underline" | Sublinhado ou pílula. |
| size | "sm" | "md" | "md" | Altura dos itens. |
| fullWidth | boolean | false | Itens dividem a largura igualmente. |