Navigation

Barra de navegación moderna con variante flotante (glassmorphism) y diseño responsivo.

Guías de Diseño

Cuándo Usar

• Navegación principal entre secciones de la aplicación
• Tabs horizontales en dashboards o vistas con múltiples categorías
• Navegación secundaria con indicadores de estado
• Menús flotantes con efecto glass

Cuándo NO Usar

• Navegación vertical en sidebar (usar lista de enlaces)
• Más de 8 elementos (considerar dropdown o menú hamburguesa)
• Navegación compleja con subniveles (usar menú desplegable)

---

Ejemplos

CSS/HTML - Angular

Paquete: @tiendana/web-foundation

CSS/HTML - Angular

Navegación base @tiendana/web-foundation

.nav

Cargando demo...

Ver código

Variaciones

.nav__item--active

Cargando demo...

Ver código

.nav--is-floating

Cargando demo...

Ver código

Variables CSS

/* Colores */
--bg-1dp: #ffffff;                /* Fondo base (en dark mode: #303030) */
--color-trust: #FFFFFF;           /* Icono sobre el indicador de error */
--color-light-forrest: #E4ECE3;   /* Background hover/active */
--color-forrest: #1B434C;         /* Dot color hover */
--color-natura: #00D47E;          /* Dot color active */
--color-error: #F54F4F;           /* Error indicator */
--color-text-primary: #0A0A0A;    /* Texto */

/* Espaciado */
--spacing-xs: 4px;                /* Gap interno */
--spacing-sm: 8px;                /* Padding */
--spacing-md: 16px;               /* Item padding */
--spacing-lg: 24px;               /* Margin bottom mobile */
--spacing-xl: 32px;               /* Shadow blur */

/* Bordes */
--border-radius-xl: 16px;         /* Nav container */
--border-radius-circle: 50%;      /* Dot e iconos */
--border-width-thin: 1px;         /* Border floating */
--border: 1px solid rgba(0, 0, 0, 0.08); /* Border base (shorthand completo) */

/* Tipografía */
--font-weight-semibold: 600;      /* Item normal */
--font-weight-extrabold: 800;     /* Item hover/active */
--font-size-base: 14px;           /* Tablet */
--font-size-xs: 12px;             /* Mobile */

Iconos

Dentro de .nav__item, los iconos .material-symbols-rounded y .mat-icon miden 16px (--nav-icon-size) y heredan el color del item (color: inherit). Así el glifo mantiene contraste sobre el fondo --color-light-forrest del item activo o en hover, y siguen el color del .nav__item (por defecto --color-text-primary); para cambiarlo define color en .nav__item o redefine --color-text-primary en el .nav. En .nav__item--on-error el icono se pinta sobre un círculo --color-error con --color-trust.

Cargando demo...

Ver código

Uso en Angular con RouterLink

<nav class="nav">
  <a routerLink="/home" routerLinkActive="nav__item--active" class="nav__item">
    Inicio
  </a>
  <a routerLink="/products" routerLinkActive="nav__item--active" class="nav__item">
    Productos
  </a>
  <a routerLink="/services" routerLinkActive="nav__item--active" class="nav__item">
    Servicios
  </a>
  <a routerLink="/contact" routerLinkActive="nav__item--active" class="nav__item">
    Contacto
  </a>
</nav>

RouterLinkActive en Angular

La directiva routerLinkActive aplica automáticamente la clase .nav__item--active cuando la ruta coincide.

Comportamiento Responsivo

Todas las anchuras: scroll horizontal con la barra oculta.

≤768px: ancho calc(100% - var(--spacing-md)), margen inferior --spacing-lg, items más compactos (--font-size-base) y punto de 4px.

≤480px: padding y gap de items reducidos y texto --font-size-xs; los iconos mantienen 16px.

Flutter

Paquete: tiendana_uikit

Flutter

Definir Navegación tiendana_uikit

// Colores
TiendanaColors.trust        // #FFFFFF - Fondo base
TiendanaColors.lightForrest // #E4ECE3 - Background hover/active
TiendanaColors.forrest      // #1B434C - Dot color hover
TiendanaColors.natura       // #00D47E - Dot color active
TiendanaColors.error        // #F54F4F - Error indicator

// Espaciado (crear constantes)
const kNavPadding = EdgeInsets.all(8.0);
const kNavItemPadding = EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0);
const kNavGap = 4.0;

// BorderRadius
BorderRadius.circular(16); // Container
BorderRadius.circular(12); // Items (16 - 4 padding)

---

Variaciones

Navegación base

Cargando demo...

Ver código

Con item activo

Cargando demo...

Ver código

Navegación flotante

Cargando demo...

Ver código

Con iconos

Cargando demo...

Ver código

Con indicador de punto

Cargando demo...

Ver código

Con indicador de error

Cargando demo...

Ver código

---

Props / API

CSS/HTML - Angular

CSS Classes

Clase	Descripción
.nav	Contenedor principal de navegación
.nav--is-floating	Variante flotante con glassmorphism
.nav__item	Elemento individual de navegación
.nav__item--active	Estado activo del elemento
.nav__item--on-error	Indicador de error en el elemento
.dot	Punto indicador de estado

Angular (RouterLink)

Propiedad	Tipo	Descripción
routerLink	string	URL de destino
routerLinkActive	string	Clase aplicada cuando está activo

Flutter

TdnNavigation

Propiedad	Tipo	Default	Descripción
items	List<TdnNavigationItem>	required	Lista de elementos de navegación
currentIndex	int?	null	Índice del elemento activo
isFloating	bool	false	Activar variante flotante
showDot	bool	false	Mostrar indicadores de punto

TdnNavigationItem

Propiedad	Tipo	Default	Descripción
label	String	required	Texto del elemento
onTap	VoidCallback	required	Callback al tocar
icon	IconData?	null	Ícono opcional
hasError	bool	false	Indicador de error

---

Accesibilidad

• Usa elementos <a> o <button> semánticos
• Incluye aria-current="page" en el elemento activo
• Asegura contraste mínimo 4.5:1 (WCAG AA)
• Navegación por teclado con Tab y Enter
• Indicadores visuales claros de hover/focus/active
• Evita solo color como indicador (usa dot o iconos también)

---

Mejores Prácticas

✅ Hacer:

• Mantener entre 3-8 elementos para legibilidad
• Usar etiquetas cortas y descriptivas (1-2 palabras)
• Indicar claramente el estado activo
• Considerar scroll horizontal en móviles
• Usar iconos consistentes con Material Symbols

❌ Evitar:

• Más de 8 elementos sin agrupar
• Etiquetas largas que rompan el layout
• Navegación sin indicador de estado activo
• Iconos decorativos sin significado
• Mezclar estilos de navegación en la misma app

---

Componentes Relacionados

• Botón - Para acciones individuales
• Breadcrumbs - Para navegación jerárquica (próximamente)
• Sidebar - Para navegación vertical (próximamente)