Nav Tabs

1.3.0

Nav Tabs es un patrón de navegación que permite a los usuarios alternar entre diferentes vistas o secciones. Se utiliza principalmente en entornos mobile y su objetivo es organizar contenido relacionado y de igual jerarquía en pestañas claramente etiquetadas, mejorando la experiencia de exploración y reduciendo la 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;

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/nav-tabs

Nav Tabs

Cuándo usar

En entornos mobile (app o sites responsive) Cuando se requiere mostrar múltiples vistas o secciones principales sin abandonar la pantalla actual.

Cuándo no usar

Cuando se busca configurar navegaciones internas de una vista o flujo

Criterios de usabilidad y productividad

Enfoque en la acción principal: Activar automáticamente la primera pestaña o la más relevante al ingresar.
Navegación fluida con teclado: Permitir cambiar de pestaña con flechas o Tab y Enter.
Persistencia de contexto: Mantener la pestaña activa al recargar o volver a la página.

Buenas prácticas de accesibilidad

Asegurar soporte completo para teclado (flechas para navegar, Enter/Espacio para activar).
Usar role="tablist", role="tab" y role="tabpanel" correctamente.
Indicar visualmente la pestaña activa y mediante aria-selected.
Áreas táctiles adecuadas en dispositivos mobiles (mínimo 44x44px).

Anatomía

Estructura básica

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

Dependencias

Icon
Badge

Do and Don'ts

✅ Do

Mantener la alineación horizontal y consistencia entre pestañas.
Utilizar en entornos mobiles alineados siempre al pie de la vista

❌ Don't

No usar si hay una sola vista disponible.
No utilizar tabs para navegación dentro de vistas o secciones de interfaz

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.