Nav Tabs

1.3.0

Nav Tabs é um padrão de navegação que permite aos usuários alternar entre diferentes vistas ou seções. É utilizado principalmente em ambientes mobile e seu objetivo é organizar conteúdo relacionado e de igual hierarquia em abas claramente etiquetadas, melhorando a experiência de exploração e reduzindo a carga cognitiva.

Default

import React from "react";
import { NavTabs } from "@nimbus-ds/patterns";
import { HomeIcon, MenuIcon, MoneyIcon, TagIcon } from "@nimbus-ds/icons";

const Example: React.FC = () => {
  const handleClick = () => {
    console.log("Tapped item");
  };

  return (
    <NavTabs>
      <NavTabs.Item
        active
        ariaLabel="Home"
        icon={<HomeIcon size="medium" />}
        onClick={handleClick}
      />
      <NavTabs.Item
        badge
        ariaLabel="Money"
        icon={<MoneyIcon size="medium" />}
        onClick={handleClick}
      />
      <NavTabs.Item
        ariaLabel="Tag"
        icon={<TagIcon size="medium" />}
        onClick={handleClick}
      />
      <NavTabs.Item
        ariaLabel="Menu"
        icon={<MenuIcon size="medium" />}
        onClick={handleClick}
      />
    </NavTabs>
  );
};

export default Example;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/nav-tabs

Nav Tabs

Quando usar

Em ambientes mobile (app ou sites responsivos) quando se requer mostrar múltiplas vistas ou seções principais sem abandonar a tela atual.

Quando não usar

Quando se busca configurar navegações internas de uma vista ou fluxo

Critérios de usabilidade e produtividade

Foco na ação principal: Ativar automaticamente a primeira aba ou a mais relevante ao entrar.
Navegação fluida com teclado: Permitir mudar de aba com setas ou Tab e Enter.
Persistência de contexto: Manter a aba ativa ao recarregar ou voltar à página.

Boas práticas de acessibilidade

Assegurar suporte completo para teclado (setas para navegar, Enter/Espaço para ativar).
Usar role="tablist", role="tab" e role="tabpanel" corretamente.
Indicar visualmente a aba ativa e mediante aria-selected.
Áreas táteis adequadas em dispositivos móveis (mínimo 44x44px).

Anatomia

Estrutura básica

Tab Container (tablist)
Individual Tab (tab)
Active Indicator
Badge

Dependências

Icon
Badge

Do and Don'ts

✅ Do

Manter o alinhamento horizontal e consistência entre abas.
Utilizar em ambientes móveis alinhados sempre ao pé da vista

❌ Don't

Não usar se houver uma única vista disponível.
Não utilizar tabs para navegação dentro de vistas ou seções de interface

Props

Additional props are passed to the <NavTabs> element. See div docs for a list of props accepted by the <NavTabs> element.

NavTabs

Name	Type	Default	Description
children*	React.ReactNode		Content to be rendered inside the Nav element.

NavTabs.Item

Name	Type	Description
icon*	React.ReactNode	Icon element to be rendered inside the button.
active	boolean	Controls whether the button is active or not.
badge	boolean	Displays a small badge on top of the button.
onClick*	onClick: () => void;	Function executed on click.
ariaLabel*	string	Text label used for accessibility.