¿Cómo utilizar Nav Bar, Breadcrumbs y Pagination en el Editor de bloques de Waclis?

El Editor de bloques de Waclis incluye diferentes componentes que permiten representar o construir elementos de navegación dentro del contenido de una Página web.

Entre ellos encontrarás:

• Nav Bar

• Breadcrumbs

• Pagination

Aunque los tres están relacionados con la navegación, cumplen funciones completamente diferentes.

En este tutorial aprenderás:

• qué diferencia existe entre Nav Bar, Breadcrumbs y Pagination;

• cuándo utilizar cada uno;

• qué relación tienen con los Links;

• por qué no modifican automáticamente el menú principal de Waclis;

• cómo trabajar con Navigator;

• cómo clonar elementos sin conservar URLs incorrectas;

• por qué Breadcrumbs manuales requieren mantenimiento;

• por qué agregar Pagination visualmente no crea paginación funcional;

• cómo adaptar estos componentes a celular;

• cómo evitar navegación falsa o confusa;

• cómo trabajar con Classes, IDs y Linked styles;

• qué precauciones tomar con HTML y CSS.

Antes de comenzar: navegación del contenido vs menú principal de Waclis

Esta diferencia es fundamental.

Cuando utilizas:

Nav Bar

dentro del Editor de bloques,

estás agregando un componente dentro del área editable de la página.

Esto no modifica automáticamente

• Header;

• menú principal;

• Footer;

• estructura general de navegación de la plantilla.

Recuerda

El Header y el Footer forman parte de la plantilla seleccionada para la Página web.

No se editan mediante el Editor de bloques.

Por ejemplo

Si estás editando el bloque:

debajo del menú

y agregas:

Nav Bar

obtendrás una navegación adicional dentro del contenido.

Conceptualmente

HEADER / MENÚ PRINCIPAL
────────────────────────────

NAV BAR CREADA EN EL BLOQUE
────────────────────────────

CONTENIDO DE LA PÁGINA

No reemplaza automáticamente

HEADER / MENÚ PRINCIPAL

Esto es especialmente importante

porque de lo contrario podrías terminar con:

MENÚ PRINCIPAL

+

SEGUNDO MENÚ CASI IDÉNTICO

sin una razón.

¿Qué componente debería utilizar?

Una guía rápida:

Ejemplo de Nav Bar

Descripción | Características | Descargas | Contacto

Ejemplo de Breadcrumbs

Inicio > Productos > Categoría > Producto

Ejemplo de Pagination

Anterior   1   2   3   Siguiente

Pero existe una diferencia crítica

Los primeros dos pueden utilizar Links configurados manualmente.

Pagination, en cambio, normalmente necesita una lógica real que determine:

• qué página es la actual;

• cuál es la anterior;

• cuál es la siguiente;

• qué contenido corresponde a cada número.

Por eso

1 2 3 4 5

dibujado visualmente:

no crea automáticamente un sistema de paginación.

1. ¿Cómo utilizar Nav Bar?

El componente Nav Bar permite organizar diferentes opciones de navegación dentro de una misma estructura.

Puede encontrarse dentro de la biblioteca de componentes estructurales del Editor de bloques.

¿Cuándo puede ser útil?

Para crear navegación dentro de una sección o área específica.

Por ejemplo:

PRODUCTO

Descripción
Características
Documentación
Preguntas frecuentes

O navegación secundaria

EMPRESA

Quiénes somos
Equipo
Historia
Contacto

O accesos a recursos

DOCUMENTACIÓN

Primeros pasos
Configuración
Integraciones
Soporte

Nav Bar no tiene que sustituir el menú principal

Su función puede ser:

ayudar al visitante a recorrer un conjunto específico de contenidos.

Nav Bar vs menú principal de Waclis

El menú principal de la Página web se gestiona desde la configuración correspondiente de Menúes.

El componente Nav Bar del Editor de bloques:

forma parte del contenido visual de un bloque.

Ejemplo

Tu Header ya contiene:

Inicio
Productos
Servicios
Blog
Contacto

Dentro de Servicios

podrías crear una Nav Bar secundaria:

Consultoría
Implementación
Capacitación
Soporte

Eso sí puede tener sentido

porque cumple una función diferente.

Ejemplo innecesario

Header:

Inicio
Productos
Servicios
Contacto

y justo debajo:

Inicio
Productos
Servicios
Contacto

Estás duplicando navegación

sin aportar nueva información.

Antes de agregar Nav Bar pregunta

¿Qué navegación adicional necesita realmente el visitante?

Nav Bar vs Tabs

Pueden parecer similares visualmente.

Nav Bar

normalmente conduce hacia:

• otro contenido;

• otra sección;

• otra página;

• otra ubicación.

Tabs

cambia contenido dentro de un mismo componente interactivo.

Ejemplo Nav Bar

Sobre nosotros → /nosotros

Equipo → /equipo

Contacto → /contacto

Ejemplo Tabs

[ DESCRIPCIÓN ][ ESPECIFICACIONES ]

→ cambia el contenido dentro del mismo componente

No construyas Tabs con una Nav Bar

si necesitas comportamiento de pestañas.

Tampoco utilices Tabs como menú

si cada opción debe abrir una página diferente.

Nav Bar vs List Group

También pueden parecer similares.

List Group

puede presentar:

Primeros pasos
Configuración
Soporte

como una lista vertical.

Nav Bar

puede resultar más apropiada para una navegación horizontal o estructura de navegación más evidente.

Elige según

• cantidad de opciones;

• jerarquía;

• desktop;

• mobile.

¿Cómo agregar Nav Bar?

Selecciona el componente:

Nav Bar

y agrégalo dentro de la Section correspondiente.

Después abre Navigator

Una estructura conceptual puede ser:

Nav Bar
├── Nav Item
│   └── Link
├── Nav Item
│   └── Link
└── Nav Item
    └── Link

La estructura exacta puede variar

por eso debes utilizar Navigator.

Cada opción puede contener un Link

Por ejemplo:

Link
Text:
Características

Url:
/caracteristicas

Al modificar una opción

revisa siempre:

TEXTO
+
URL

Error clásico al clonar

Original:

Productos
→ /productos

Copia:

Servicios
→ /productos

Cambiaste el texto,

pero no el destino.

Revisa cada Link después de clonar

Target

También puedes revisar:

Target

según el destino.

Mantén una lógica consistente

Si todas las opciones son navegación interna:

normalmente deberían comportarse de forma coherente.

No hagas:

Opción A
→ misma pestaña

Opción B
→ nueva pestaña

Opción C
→ misma pestaña

sin una razón.

Rel y Download

No los modifiques sin necesidad.

Una Nav Bar habitual

normalmente utiliza Links de navegación,

no descargas.

Si una opción realmente descarga un recurso

pregunta si debería presentarse como:

Descargar catálogo

dentro de la navegación

o como un CTA específico.

No mezcles funciones distintas sin una intención clara.

Cantidad de opciones

Una Nav Bar con:

3 a 5 opciones

puede ser fácil de recorrer.

Una con:

15 opciones

puede volverse complicada,

especialmente en mobile.

No existe un número obligatorio

pero cuanto más crece:

• más espacio necesita;

• más difícil se vuelve la jerarquía.

Si tienes muchas opciones

considera:

• categorías;

• List Group;

• menú de navegación real;

• varias secciones.

No reduzcas el Font size hasta hacer entrar 15 enlaces en una sola fila.

Nav Bar y mobile

Desktop:

Descripción | Características | Descargas | Contacto

Mobile puede necesitar

Descripción
Características
Descargas
Contacto

o una reorganización equivalente.

No mantengas:

DescripciónCaracterísticasDescargasContacto

apretado en una sola línea.

Si el componente posee comportamiento responsive propio

compruébalo en:

• tablet;

• teléfono;

• Ver página.

No asumiremos que cualquier Nav Bar se convierte automáticamente en menú desplegable

La estructura exacta depende del componente utilizado.

Si no se adapta correctamente

primero revisa:

• Wrap;

• Width;

• Padding;

• cantidad de opciones;

• estructura.

No agregues automáticamente un menú hamburguesa mediante JavaScript

si el componente actual no lo necesita.

Nav Bar y estado actual

Una navegación puede destacar la opción actual.

Por ejemplo:

Descripción
CARACTERÍSTICAS
Descargas

Pero no confundas:

estilo Active

con lógica automática.

Si el Nav Bar es manual

puede requerir configurar manualmente cuál opción se presenta como activa.

No asumas que sabe automáticamente qué página estás visitando

si no existe una funcionalidad que lo determine.

Especialmente si copias la misma Nav Bar a varias páginas

podrías terminar con:

Productos

marcado como activo también en:

Servicios

Revisa cada instancia manual.

Nav Bar y anclas internas

Puede utilizarse para navegar dentro de una misma página.

Por ejemplo:

Características
Especificaciones
Preguntas frecuentes

podrían apuntar a Sections con IDs correspondientes.

Conceptualmente

Características
→ #caracteristicas

La Section de destino necesita un ID válido y único.

Ejemplo

id="caracteristicas"

No utilices el mismo ID en varias Sections.

Después prueba el desplazamiento real.

No asumas que escribir un nombre parecido es suficiente.

Debe coincidir exactamente la referencia.

Nav Bar fija mientras se desplaza

Eso sería un comportamiento adicional.

No asumas que el componente:

Nav Bar

queda automáticamente fijo o Sticky.

Si necesitas ese comportamiento

requiere revisar la estructura y estilos específicos.

No utilices Position fixed indiscriminadamente.

Puede:

• tapar el Header;

• ocultar contenido;

• generar problemas mobile.

Para navegación local simple

una Nav Bar estática puede ser suficiente.

2. ¿Cómo utilizar Breadcrumbs?

El componente Breadcrumbs permite representar la ubicación jerárquica del contenido.

Conceptualmente:

Inicio > Productos > Electrónica > Producto ABC

¿Qué comunica?

Ayuda al visitante a comprender:

• dónde se encuentra;

• qué categorías superiores existen;

• cómo volver hacia niveles anteriores.

Breadcrumbs no es simplemente una lista de Links

Tiene una lógica jerárquica.

Ejemplo

Inicio
>
Productos
>
Audio
>
Auriculares

Esto comunica:

Auriculares
pertenece a
Audio
que pertenece a
Productos

¿Cuándo puede ser útil?

En sitios con:

• categorías;

• subcategorías;

• contenidos jerárquicos;

• documentación;

• catálogos;

• páginas profundas.

Ejemplo documentación

Inicio > Ayuda > Editor de bloques > Componentes

Ejemplo Blog

Inicio > Blog > Diseño > Artículo

si esa estructura corresponde realmente al sitio.

¿Cuándo puede ser innecesario?

En una página simple:

Inicio > Contacto

puede aportar poco,

especialmente si la navegación principal ya es muy clara.

No agregues Breadcrumbs a todas las páginas solo porque existe el componente

Utilízalo cuando la jerarquía aporta orientación.

Breadcrumbs vs Nav Bar

Breadcrumbs responde:

¿Dónde estoy dentro de la estructura?

Nav Bar responde:

¿A qué otros contenidos puedo ir?

Ejemplo

Breadcrumb:

Inicio > Productos > Categoría A > Producto

Nav Bar:

Descripción | Especificaciones | Descargas

Pueden convivir

porque resuelven necesidades diferentes.

¿Cómo agregar Breadcrumbs?

Agrega el componente:

Breadcrumbs

dentro de la estructura correspondiente.

Utiliza Navigator

Una estructura conceptual puede ser:

Breadcrumbs
├── Breadcrumb Item
│   └── Link
├── Breadcrumb Item
│   └── Link
├── Breadcrumb Item
│   └── Link
└── Current Item

La estructura exacta puede variar.

Normalmente

los niveles anteriores pueden ser Links.

El nivel actual puede presentarse como texto

porque ya te encuentras allí.

Ejemplo

Inicio → Link

Productos → Link

Audio → Link

Auriculares → actual

No necesitas que el último elemento enlace a sí mismo

Mantén una jerarquía real

Este punto es fundamental.

No utilices:

Inicio > Contacto > Productos > Blog > Auriculares

simplemente porque esas páginas existen.

Breadcrumbs no representa el historial de clics

Representa una jerarquía conceptual.

Ejemplo correcto

Inicio
>
Productos
>
Auriculares
>
Modelo ABC

No significa

el usuario hizo clic primero en Inicio,
después Productos,
después Auriculares

El usuario podría haber ingresado directamente al Modelo ABC.

Breadcrumbs sigue mostrando su ubicación jerárquica.

Breadcrumbs manuales

Si construyes Breadcrumbs manualmente:

debes mantenerlos actualizados.

Por ejemplo

Original:

Inicio > Productos > Categoría A > Producto A

Lo clonas para Producto B

y modificas únicamente:

Producto A
→ Producto B

Pero Producto B pertenece a:

Categoría B

El Breadcrumb quedaría incorrecto.

Debes revisar todos los niveles.

No asumas sincronización automática

Un Breadcrumb creado visualmente dentro del Editor de bloques puede ser contenido manual.

No necesariamente conoce

• categoría actual;

• nombre de página;

• ruta;

• jerarquía.

Si cambia la estructura del sitio

debes actualizarlo.

Clonar Breadcrumbs

Puede resultar útil para mantener diseño,

pero revisa:

• todos los textos;

• todas las URLs;

• nivel actual;

• IDs.

No cambies solamente el último elemento.

Separadores

Breadcrumbs suelen utilizar separadores visuales.

Por ejemplo:

>

o:

/

Mantén un criterio consistente.

No utilices separadores decorativos demasiado llamativos.

Su función es mostrar relación jerárquica.

Breadcrumbs muy largos

Ejemplo:

Inicio
>
Productos
>
Industria
>
Equipamiento
>
Herramientas
>
Herramientas eléctricas
>
Producto

puede volverse complicado en celular.

Pregunta si todos los niveles son necesarios.

No elimines niveles arbitrariamente si son importantes,

pero evita jerarquías artificialmente profundas.

Mobile

Puede ocupar varias líneas.

Eso puede ser correcto.

No utilices:

white-space: nowrap

si provoca desbordamiento.

Permite que los elementos se adapten cuando sea necesario.

No reduzcas el Font size excesivamente.

Breadcrumbs y SEO

Breadcrumbs pueden ayudar a representar jerarquías para el usuario.

Pero agregar visualmente este componente no significa automáticamente:

“Google interpretará una estructura avanzada específica.”

Este tutorial se centra en:

• navegación;

• experiencia;

• contenido visual.

No asumas funcionalidades estructuradas adicionales si no han sido implementadas.

Breadcrumbs y Home

El primer elemento puede ser:

Inicio

Pero no existe una obligación absoluta de mostrarlo en cualquier contexto.

Mantén el recorrido que realmente ayuda al visitante.

Breadcrumbs dentro de un bloque fijo

Si agregas Breadcrumbs en:

debajo del menú

recuerda que ese bloque es independiente del contenido dinámico central.

Por eso

si utilizas una estructura manual en varias páginas:

puede necesitar mantenimiento individual.

No asumas que el nombre del contenido central se insertará automáticamente.

3. ¿Cómo utilizar Pagination?

El componente Pagination representa controles para recorrer diferentes páginas o conjuntos de resultados.

Conceptualmente:

← Anterior   1   2   3   4   Siguiente →

Puede encontrarse dentro de la biblioteca de componentes.

Pero Pagination tiene una particularidad esencial

su apariencia visual no crea automáticamente la funcionalidad de paginación.

Puedes agregar:

1
2
3
4
Siguiente

al lienzo,

pero eso no significa que Waclis vaya a dividir automáticamente:

40 elementos

en:

10 por página

La paginación real necesita lógica

Debe existir una funcionalidad que determine:

• conjunto total de elementos;

• cantidad por página;

• página actual;

• página anterior;

• página siguiente;

• destino de cada número.

Esto es fundamental

Pagination puede ser

PRESENTACIÓN VISUAL

pero para funcionar necesita:

LÓGICA REAL

¿Cuándo utilizar Pagination?

Cuando ya existe un conjunto de contenidos paginado y necesitas trabajar sobre su presentación.

Por ejemplo

una funcionalidad puede mostrar:

Página 1
→ elementos 1 a 10

Página 2
→ elementos 11 a 20

Y Pagination permite navegar entre ellas.

No utilices Pagination como decoración

Ejemplo problemático

1 2 3 Siguiente

debajo de seis Cards estáticas,

cuando todos los números llevan a:

#

o no hacen nada.

Eso crea una interacción falsa.

Si no existe otra página

no necesitas Pagination.

Pagination vs Carousel

Ambos permiten avanzar entre contenido,

pero funcionan de forma diferente.

Carousel

cambia elementos dentro de una misma zona interactiva.

Pagination

normalmente cambia una página o conjunto de resultados.

Ejemplo Carousel

[ CARD A ][ CARD B ] →

Ejemplo Pagination

Página 1
↓
elementos 1-10

[ 1 ][ 2 ][ 3 ]

No utilices Pagination para controlar un Carousel

salvo que la estructura específica haya sido diseñada así.

Pagination vs Slider

Mismo principio.

Un Slider posee controles internos propios.

Pagination representa navegación entre páginas o bloques paginados.

Estructura conceptual

Pagination
├── Previous
├── Page 1
├── Page 2
├── Page 3
└── Next

Cada elemento puede ser

• Link;

• control;

según la estructura.

Utiliza Navigator.

Si existe funcionalidad real

no cambies propiedades internas indiscriminadamente.

Por ejemplo

pueden existir URLs o parámetros que determinan la página.

No reemplaces:

?page=2

por:

#

solo para cambiar el diseño.

Para cambiar apariencia

utiliza Estilo.

Página actual

Pagination debería comunicar cuál es la página activa.

Por ejemplo:

Anterior   1   [2]   3   4   Siguiente

La página:

2

está activa.

Si el componente es funcional

ese estado debería corresponder al contenido mostrado.

No marques manualmente:

3

como activa si estás viendo página 2.

Primera página

Puede ocurrir que:

Anterior

no deba estar disponible.

Última página

Puede ocurrir que:

Siguiente

no deba estar disponible.

El comportamiento exacto debe corresponder a la funcionalidad real.

No simules Disabled solamente por estética

Si la paginación es estática

pregúntate si debería existir.

Muchos números

Una Pagination como:

1 2 3 4 5 6 7 8 9 10 11 12 13 14...

puede volverse muy larga.

Una implementación funcional puede necesitar estrategias como:

1 2 3 ... 20

pero no afirmaremos que el componente de Waclis las genere automáticamente.

Si ya existe funcionalidad:

conserva la estructura.

No construyas manualmente 100 Links.

Pagination y URLs

En una implementación funcional,

las URLs pueden incluir parámetros o rutas.

No modifiques el destino sin comprenderlo.

Ejemplo conceptual

Página 1
→ ?page=1

Página 2
→ ?page=2

Estos son ejemplos conceptuales,

no URLs obligatorias de Waclis.

No copies este formato si la funcionalidad actual utiliza otro.

Pagination en mobile

Desktop:

Anterior  1  2  3  4  5  Siguiente

Mobile podría necesitar:

‹  1  2  3  ›

o una distribución más compacta,

dependiendo del diseño.

No elimines controles importantes

solamente para hacerla entrar.

Primero revisa:

• Padding;

• cantidad de números;

• texto;

• comportamiento real.

Evita Buttons o Links demasiado pequeños.

El usuario debe poder seleccionar cada página con comodidad.

Pagination con texto

Anterior
Siguiente

puede ser más claro que solamente:

‹
›

según el contexto.

Pero en espacios pequeños los iconos pueden resultar útiles.

Mantén comprensión.

No dependas de iconos ambiguos.

Nav Bar, Breadcrumbs y Pagination: diferencia conceptual

Podemos resumirlos así:

NAV BAR
→ dónde puedo ir

BREADCRUMBS
→ dónde estoy

PAGINATION
→ qué página del conjunto estoy recorriendo

Esta diferencia ayuda a elegir correctamente.

Ejemplo completo

Una página de documentación podría mostrar:

Breadcrumbs

Inicio > Ayuda > Editor de bloques > Componentes

Después:

Nav Bar

Primeros pasos | Componentes | Personalización

Y si existe una lista paginada real de artículos:

Pagination

Anterior 1 2 3 Siguiente

Cada componente cumple una función distinta.

No es necesario utilizar los tres simultáneamente.

Evita sobrecargar navegación

Una página puede terminar con:

Header
Breadcrumbs
Nav Bar
Tabs
Pagination
Footer

Eso puede ser apropiado en una aplicación compleja,

pero para una Página web sencilla:

puede generar demasiado ruido.

Pregunta siempre

¿Esta navegación ayuda al usuario o le agrega decisiones innecesarias?

Jerarquía de navegación

No todas las navegaciones tienen el mismo nivel.

Principal

Header

Jerárquica

Breadcrumbs

Local

Nav Bar

Contenido interno

Tabs

Paginación

Pagination

Mantén diferencias visuales

No hagas que una Nav Bar secundaria sea más dominante que el menú principal

sin una razón.

Breadcrumbs suelen ser más discretos

porque cumplen una función orientativa.

Pagination debe ser visible

pero no necesita dominar la página.

Navigator en estos componentes

Repasemos las estructuras conceptuales.

Nav Bar

Nav Bar
└── Nav Item
    └── Link

Breadcrumbs

Breadcrumbs
└── Breadcrumb Item
    └── Link

Pagination

Pagination
└── Page Item
    └── Link

La estructura exacta puede variar

Utiliza Navigator antes de

• clonar;

• eliminar;

• mover.

Seleccionar padre

También puede ayudarte.

Por ejemplo

seleccionaste:

texto "Productos"

pero necesitas cambiar:

Link

Utiliza:

Seleccionar padre

hasta llegar al elemento correcto.

Pero observa siempre la jerarquía.

No elimines Nav Bar completa

si querías retirar una opción.

Clonar elementos

Mismo principio en los tres componentes.

Clona:

Nav Item

si quieres otra opción.

Clona:

Breadcrumb Item

si necesitas otro nivel.

Clona:

Page Item

solo si la paginación funcional realmente necesita otro control.

Después revisa

• texto;

• URL;

• Target;

• ID;

• estado Active.

No dejes Links duplicados

Eliminar

Waclis no solicita confirmación.

Si eliminas:

Nav Bar

en lugar de:

Nav Item

puedes retirar todo el componente.

Utiliza Deshacer

si ocurre.

Mover opciones

Puedes reorganizar Nav Items.

Por ejemplo

Antes:

Servicios
Productos
Contacto

Después:

Productos
Servicios
Contacto

Después de mover:

revisa mobile.

Breadcrumbs

No deberían reordenarse arbitrariamente.

Su orden representa jerarquía.

No hagas:

Producto > Inicio > Categoría

Pagination

Tampoco debería reordenarse por diseño.

Los números tienen una secuencia funcional.

Classes e IDs

Aplica la misma regla:

ID
→ único

Class
→ puede compartirse

Nav Items pueden compartir

secondary-nav-item

Breadcrumbs pueden compartir

breadcrumb-item-custom

Pagination puede compartir

pagination-item-custom

Pero no cambies IDs internos

si participan en una funcionalidad existente.

Linked styles

Puede resultar útil para mantener:

• mismo Padding;

• misma Typography;

• mismo Border.

Por ejemplo

todas las opciones de Nav Bar deberían mantener una apariencia coherente.

Si cambias una y cambian todas:

puede ser correcto.

Para una opción especial:

agrega una Class adicional.

Ejemplo

secondary-nav-item active-special

si realmente necesitas una excepción.

No agregues IDs distintos a todos

solo para personalizarlos individualmente.

Estado Hover

Nav Bar puede utilizar Hover.

Normal:

texto oscuro

Hover:

color de marca

Mantén una diferencia moderada.

Breadcrumbs también pueden tener Hover

en los elementos que son Links.

El elemento actual

no debería necesariamente parecer clicable.

Pagination

sus Links también pueden utilizar Hover.

Mantén diferencia entre:

Hover

y:

Active

No hagas que Hover y Active se vean exactamente iguales

Active

Un elemento Active debe comunicar:

ubicación actual

Pero recuerda

configurar visualmente Active no crea automáticamente la lógica de página actual.

Especialmente en navegación manual.

CSS global peligroso: navegación

Evita reglas globales como:

nav {
    background: #000;
}

si no sabes qué otras navegaciones existen.

Puede afectar:

• Header;

• Nav Bar;

• Tabs;

• componentes internos.

Evita:

.nav-link {
    color: red;
}

globalmente.

Puede afectar diferentes componentes.

Evita:

.breadcrumb {
    margin: 0;
}

globalmente si existen otros Breadcrumbs.

Evita:

.pagination {
    justify-content: center;
}

globalmente si no quieres modificar todas las instancias.

Utiliza scope

Por ejemplo:

product-secondary-nav

CSS:

.product-section .product-secondary-nav {
    ...
}

Breadcrumbs

custom-breadcrumbs

Pagination

custom-pagination

Estos nombres son ejemplos

No representan Classes obligatorias.

No modifiques Header accidentalmente

Este es un riesgo importante.

Una regla como:

.navbar {
    display: none;
}

podría afectar una navegación estructural de la Página web.

Si solamente quieres modificar el componente que agregaste:

utiliza una Class propia.

Nunca ocultes globalmente .navbar

sin comprobar el alcance.

CSS global sobre Links

También evita:

a {
    text-decoration: none;
}

globalmente.

Puede hacer que muchos Links pierdan una indicación visual importante.

Limita la personalización.

Bootstrap y navegación

Waclis utiliza Bootstrap 4 en el entorno actual de la Página web.

Algunos componentes pueden utilizar Classes estructurales asociadas a este sistema.

Por eso

no elimines Classes como:

• nav;

• navbar;

• breadcrumb;

• pagination;

u otras relacionadas,

si no comprendes su función.

Tampoco reemplaces su estructura por ejemplos de otra versión de Bootstrap

sin verificar.

Si pides ayuda a una IA

indica:

Waclis utiliza Bootstrap 4.

No pidas “actualizar a Bootstrap 5”

si tu objetivo es personalizar el componente existente.

HTML del elemento

Editar código HTML <>

puede ser útil para comprender:

• Items;

• Links;

• Classes;

• jerarquía;

• estado Active.

Especialmente en Pagination funcional

puede ayudarte a identificar URLs reales.

Pero no necesitas HTML para:

• cambiar texto;

• cambiar color;

• modificar Padding.

Utiliza primero:

Contenido y Estilo

Code editor global

No es necesario para modificaciones habituales.

No abras Code editor para cambiar:

Productos

por:

Servicios

Utiliza el elemento correspondiente.

JavaScript

No agregues JavaScript para crear navegación si:

• un Link normal resuelve la acción;

• el componente ya posee comportamiento.

Por ejemplo

Nav Bar con Links:

no necesita JavaScript para ir a:

/contacto

Breadcrumbs:

tampoco.

Pagination

si no existe una lógica real detrás:

agregar JavaScript improvisado no es una solución general.

Primero debe existir un conjunto de datos o páginas que realmente puedan paginarse.

No simules funcionalidad.

Ejemplo práctico 1: Nav Bar secundaria de Servicios

Queremos:

CONSULTORÍA | IMPLEMENTACIÓN | CAPACITACIÓN | SOPORTE

Paso 1

Agrega Nav Bar.

Paso 2

Utiliza Navigator.

Paso 3

Identifica cada Nav Item.

Paso 4

Modifica los textos.

Paso 5

Selecciona cada Link.

Paso 6

Configura su Url real.

Paso 7

Revisa Target.

Paso 8

Personaliza:

• Typography;

• Padding;

• Hover;

• Active si corresponde.

Paso 9

Revisa mobile.

Paso 10

Guardar Cambios.

Paso 11

Ver página.

Paso 12

Prueba las cuatro opciones.

Ejemplo práctico 2: navegación interna por anclas

Página larga:

Características
Especificaciones
Beneficios
FAQ

Nav Bar:

Características | Especificaciones | Beneficios | FAQ

Cada Section puede tener un ID único.

Por ejemplo:

id="caracteristicas"

Link:

#caracteristicas

Repite el procedimiento con cada destino.

Después prueba todos los enlaces.

No dupliques IDs.

Ejemplo práctico 3: Breadcrumbs de producto

Inicio > Productos > Muebles > Silla ABC

Configura:

Inicio
→ Home

Productos:

→ Productos

Muebles:

→ categoría Muebles

Silla ABC:

→ contenido actual

puede mostrarse sin Link según la estructura.

Después comprueba toda la jerarquía.

Ejemplo práctico 4: Breadcrumbs de documentación

Inicio > Ayuda > Editor de bloques > Navegación

Este recorrido ayuda al visitante a comprender:

Navegación

forma parte de:

Editor de bloques

No agregues niveles que no existen.

Ejemplo práctico 5: Pagination funcional existente

Supongamos que una página ya presenta:

10 artículos

y dispone de varias páginas reales.

Pagination:

Anterior  1  2  3  Siguiente

Si solamente quieres cambiar apariencia:

modifica:

• Typography;

• Border;

• Background;

• Hover;

• Active;

• Padding.

No cambies:

• URLs;

• parámetros;

• atributos funcionales;

sin necesidad.

Después prueba:

1
2
3
Anterior
Siguiente

Ejemplo práctico 6: Cards estáticas sin Pagination

Tienes:

[ CARD A ][ CARD B ][ CARD C ]

[ CARD D ][ CARD E ][ CARD F ]

Todas están en la página.

No agregues:

1 2 3

si no existen otras páginas.

Si quieres reducir contenido:

puede ser mejor:

• mostrar menos Cards;

• crear una página de detalle;

• utilizar Carousel;

• separar categorías.

Pagination visual no resolverá el problema.

¿Qué hacer si Nav Bar abre la página incorrecta?

Selecciona el Link correspondiente.

Revisa:

Url

Esto ocurre frecuentemente después de clonar.

¿Qué hacer si no encuentro Url?

Probablemente tengas seleccionado:

• Nav Item;

• texto;

• contenedor;

en lugar del Link.

Utiliza Navigator o Seleccionar padre.

¿Qué hacer si quiero agregar una opción?

Clona:

Nav Item completo

Después actualiza:

• texto;

• URL;

• ID.

¿Qué hacer si quiero eliminar una opción?

Selecciona Nav Item.

No elimines Nav Bar completa.

¿Qué hacer si una opción no entra en celular?

Primero revisa:

• texto;

• cantidad de opciones;

• Padding;

• Wrap.

No reduzcas Font size excesivamente.

¿Qué hacer si todas las opciones quedan en una sola línea y desbordan?

Revisa la estructura responsive.

No utilices:

body {
    overflow-x: hidden;
}

como solución.

Corrige la navegación.

¿Qué hacer si quiero un menú hamburguesa?

Eso implica una estructura interactiva adicional.

No asumas que un Nav Bar simple debe convertirse automáticamente.

Si necesitas ese comportamiento:

primero revisa las opciones y estructura existentes del componente.

No agregues librerías externas sin necesidad.

¿Qué hacer si Nav Bar secundaria se parece demasiado al Header?

Cambia su jerarquía visual.

Puede ser:

• más pequeña;

• más discreta;

• con otro Background;

• dentro de un Container.

No debería competir con la navegación principal.

¿Qué hacer si Breadcrumbs muestran una categoría incorrecta?

Actualiza:

• texto;

• Link.

Si son manuales:

debes hacerlo manualmente.

¿Qué hacer si cloné Breadcrumbs y todos apuntan al contenido anterior?

Revisa cada Link.

No cambies solamente el último nivel.

¿Qué hacer si Breadcrumbs son demasiado largos en celular?

Revisa:

• cantidad de niveles;

• nombres;

• Padding;

• Wrap.

No reduzcas el texto hasta hacerlo ilegible.

¿Qué hacer si el último elemento parece Link pero no lo es?

Puede ser intencional porque representa el contenido actual.

Diferencia visualmente el estado actual cuando corresponda.

¿Qué hacer si quiero que el último elemento también sea clicable?

Pregunta si aporta algo.

Un Link hacia la misma página normalmente es innecesario.

¿Qué hacer si Breadcrumbs no siguen la ruta real que hizo el usuario?

Eso no es necesariamente un error.

Breadcrumbs muestran jerarquía,

no historial de navegación.

¿Qué hacer si quiero un botón “Volver”?

No utilices Breadcrumbs para simular historial.

Puedes utilizar un Link hacia un destino específico si corresponde.

“Volver” dinámico sería otro comportamiento.

¿Qué hacer si Pagination aparece pero no cambia contenido?

Pregunta:

¿Existe realmente lógica de paginación?

Si no existe:

el componente es solamente visual.

No lo publiques como funcional.

¿Qué hacer si todos los números apuntan a #?

No existe navegación real.

Debes:

• configurar destinos reales si existen páginas reales;

• o eliminar Pagination.

No dejes Links de demostración.

¿Qué hacer si el número activo no corresponde?

Revisa la lógica o estado de la implementación existente.

Si lo configuraste manualmente:

actualízalo.

¿Qué hacer si Anterior funciona pero Siguiente no?

Revisa el Link o funcionalidad específica de Siguiente.

No asumas que todos los controles comparten el mismo destino.

¿Qué hacer si al clonar una página dejé Pagination apuntando a la anterior?

Actualiza todos los destinos.

Pero considera si esa paginación debería ser manual.

Si son muchas páginas:

una solución dinámica sería más mantenible.

¿Qué hacer si tengo 100 páginas?

No construyas manualmente 100 controles.

Necesitas una funcionalidad real de paginación.

¿Qué hacer si quiero mostrar “Página 2 de 10”?

Puedes presentarlo como información complementaria cuando corresponda.

Pero debe coincidir con la página real.

No inventes:

2 de 10

si no existe ese conjunto.

Hover y estados

Nav Bar

Hover puede indicar interactividad.

Breadcrumbs

Solo los elementos clicables necesitan comunicar Hover.

Pagination

Hover debe diferenciarse de Active.

Ejemplo

NORMAL
→ borde gris

HOVER
→ borde de marca

ACTIVE
→ fondo de marca

Mantén suficiente contraste.

No dependas únicamente de color

cuando el estado actual sea importante.

Responsive general

Revisa estos componentes en:

• desktop;

• tablet;

• celular.

Especialmente

Nav Bar:

muchas opciones

Breadcrumbs:

muchos niveles

Pagination:

muchos números

La respuesta no siempre es reducir Font size.

Puede ser:

• simplificar;

• permitir Wrap;

• eliminar elementos innecesarios;

• utilizar otra estructura.

Accesibilidad en Nav Bar

Los Links deberían tener textos claros.

Evita:

1
2
3

sin contexto,

salvo que su significado sea evidente.

Accesibilidad en Breadcrumbs

El orden debe ser lógico.

Los separadores no deberían ser la única forma de comprender la estructura.

Accesibilidad en Pagination

El usuario debe poder reconocer:

• página actual;

• anterior;

• siguiente.

Mantén los controles fáciles de seleccionar.

No elimines indicadores de foco globalmente

Especialmente si personalizas:

outline: none;

No elimines foco sin alternativa.

Animaciones

Estos componentes normalmente no necesitan grandes animaciones.

Una Nav Bar que:

rebota

al entrar

puede distraer.

Breadcrumbs deberían ser discretos.

Pagination también.

Si utilizas Animate on scroll

aplícalo con moderación al bloque completo,

no necesariamente a cada Link.

Mantenimiento de Nav Bar

Si una página deja de existir:

actualiza o retira su Link.

Si cambia la URL:

actualízala.

Si cambia el nombre:

actualiza texto.

Mantenimiento de Breadcrumbs

Si cambia la jerarquía:

actualiza:

• niveles;

• textos;

• Links.

Mantenimiento de Pagination manual

Puede volverse complejo muy rápidamente.

Si agregas una nueva página intermedia:

podrías necesitar actualizar:

• página anterior;

• siguiente;

• numeración;

• Active;

en varias páginas.

Por eso la Pagination es uno de los componentes que más claramente se beneficia de una funcionalidad dinámica cuando el conjunto es grande.

No confundas contenido estático con navegación dinámica

Una Nav Bar manual puede ser perfectamente válida.

Breadcrumbs manuales también,

si la estructura es pequeña.

Pagination manual de muchas páginas

puede resultar difícil de mantener.

Utilizar IA para diseñar una Nav Bar secundaria

Puedes utilizar ChatGPT, Claude o Gemini.

Por ejemplo:

Tengo estas páginas:

[lista]

Necesito una navegación secundaria dentro de una sección de Waclis.

Agrupa solamente aquellas que pertenecen al mismo nivel y función.

No incluyas páginas del menú principal si no aportan valor adicional.
No inventes páginas.

IA para reducir opciones

Esta Nav Bar tiene estas opciones:

[lista]

En celular resulta demasiado extensa.

Identifica:
- opciones duplicadas;
- nombres que pueden abreviarse;
- elementos que deberían agruparse en otra estructura.

No elimines contenido sin explicarlo.

IA para revisar Links

Tengo esta navegación:

Texto → URL

[pegar lista]

Revisa:
- si cada texto anticipa correctamente el destino;
- URLs duplicadas inesperadas;
- opciones que apuntan al mismo destino.

No inventes URLs nuevas.

IA para Breadcrumbs

Tengo esta jerarquía real del sitio:

[pegar estructura]

Página actual:
[nombre]

Construye el recorrido conceptual de Breadcrumbs utilizando únicamente niveles que existan realmente.

No inventes categorías.

IA para revisar Breadcrumbs

Tengo estos Breadcrumbs:

[lista de texto + URL]

La jerarquía real es:

[estructura]

Identifica:
- niveles incorrectos;
- enlaces que apuntan a otra categoría;
- niveles innecesarios.

No cambies URLs sin indicarlo.

IA para decidir si Breadcrumbs aporta valor

Mi sitio tiene esta profundidad de navegación:

[estructura]

Analiza en qué tipos de páginas Breadcrumbs ayudaría realmente al usuario y en cuáles sería redundante.

No asumas que todas las páginas necesitan Breadcrumbs.

IA para Pagination

Tengo este conjunto de contenido:

[cantidad y estructura]

Quiero decidir si necesito:
- Pagination;
- Carousel;
- Mostrar más;
- una sola página.

Analiza según:
- cantidad de elementos;
- necesidad de URL individual por página;
- facilidad de navegación;
- mobile.

No inventes funcionalidad que no existe.

IA para detectar paginación falsa

Este es el HTML de una Pagination en Waclis:

[pegar]

Identifica:
- Previous;
- Next;
- números;
- URLs;
- elementos Active;
- Links con #;
- controles sin destino real.

No agregues JavaScript.
No inventes páginas.

IA para diagnosticar Pagination

Tengo esta Pagination que debería ser funcional:

[HTML]

Página actual:
[datos]

Revisa si:
- Previous apunta correctamente;
- Next apunta correctamente;
- los números tienen destinos diferentes;
- Active coincide con la página actual.

No reescribas todo el componente.

IA para CSS de Nav Bar

Tengo una Nav Bar secundaria en Waclis.

Raíz:
.secondary-nav-custom

Necesito:
- Links claramente visibles;
- Hover moderado;
- estado Active diferenciado;
- permitir Wrap en celular;
- no modificar Header ni menú principal.

Waclis utiliza Bootstrap 4.

No cambies HTML.
No agregues JavaScript.

Devuélveme solamente CSS limitado a .secondary-nav-custom.

IA para Breadcrumbs

Tengo Breadcrumbs dentro de:

.custom-breadcrumbs-section

Necesito:
- Typography discreta;
- Links distinguibles;
- último elemento con estilo de página actual;
- permitir varias líneas en celular;
- no afectar otros Breadcrumbs.

Waclis utiliza Bootstrap 4.

No cambies HTML.
Devuélveme solamente CSS localizado.

IA para Pagination

Tengo una Pagination funcional en:

.custom-pagination-section

Necesito modificar solamente:
- Padding;
- Border radius;
- Hover;
- estado Active;
- espacio entre controles.

No cambies URLs.
No cambies parámetros.
No modifiques la lógica.
No agregues JavaScript.

Waclis utiliza Bootstrap 4.

Devuélveme solamente CSS limitado a .custom-pagination-section.

IA para detectar CSS global peligroso

Revisa este CSS:

[pegar]

Busca selectores globales que puedan afectar navegación, especialmente:

nav
.nav
.navbar
.nav-link
.active
.breadcrumb
.breadcrumb-item
.pagination
.page-item
.page-link
a

Indica cuáles pueden afectar Header, Tabs u otros componentes.

No modifiques el CSS.

IA para navegación responsive

Tengo esta Nav Bar secundaria:

[opciones]

En desktop entra en una fila.
En celular no entra.

Antes de generar CSS analiza:
1. si los textos pueden abreviarse;
2. si debería permitir Wrap;
3. si alguna opción debería pasar a List Group;
4. si existe demasiada navegación secundaria.

No ocultes Links importantes.
No agregues un menú hamburguesa sin justificarlo.

Buenas prácticas para Nav Bar

Recomendamos:

• utilizarla como navegación secundaria o local;

• no duplicar el menú principal;

• mantener pocas opciones claras;

• configurar cada URL;

• revisar Target;

• comprobar Active;

• utilizar Navigator;

• mantener una jerarquía visual menor que el Header;

• adaptar a celular;

• no agregar JavaScript innecesario.

Buenas prácticas para Breadcrumbs

Recomendamos:

• utilizarlos únicamente cuando existe jerarquía;

• mantener niveles reales;

• utilizar el último elemento como ubicación actual cuando corresponda;

• mantener Links actualizados;

• no confundirlos con historial;

• revisar todas las rutas después de clonar;

• permitir adaptación a celular;

• mantener apariencia discreta.

Buenas prácticas para Pagination

Recomendamos:

• utilizarla solamente cuando existe paginación real;

• no publicar controles ficticios;

• mantener página actual correctamente identificada;

• comprobar Previous y Next;

• conservar URLs o parámetros funcionales;

• no crear manualmente cientos de Links;

• probar todos los controles;

• mantener área clicable suficiente;

• adaptar a celular.

Errores frecuentes

Creer que Nav Bar modifica el menú principal

No lo hace automáticamente.

Crear un segundo menú idéntico debajo del Header

Evita navegación redundante.

Utilizar Nav Bar como Tabs

Son componentes diferentes.

Utilizar Tabs para abrir páginas diferentes

Considera Nav Bar o Links.

Clonar Nav Item y dejar la URL anterior

Actualiza Url.

Utilizar demasiadas opciones

Simplifica.

Reducir todos los Links a texto diminuto en celular

Revisa estructura.

Asumir que Nav Bar se convierte automáticamente en menú hamburguesa

Comprueba la implementación real.

Aplicar CSS global a .navbar

Puede afectar el Header.

Utilizar Breadcrumbs como historial de clics

Representan jerarquía.

Inventar niveles de Breadcrumbs

Utiliza la estructura real.

Clonar Breadcrumbs y cambiar solo el último elemento

Revisa todos los niveles.

Mantener Breadcrumbs desactualizados después de reorganizar el sitio

Actualízalos.

Hacer Breadcrumbs demasiado dominantes

Son navegación contextual.

Utilizar Breadcrumbs sin necesidad en páginas muy simples

Puede ser redundante.

Creer que agregar Pagination crea páginas automáticamente

No crea la lógica.

Utilizar 1 2 3 Siguiente con Links #

No existe paginación real.

Mostrar Pagination debajo de contenido totalmente estático sin otras páginas

No aporta funcionalidad.

Marcar una página Active incorrecta

Debe coincidir con la página actual.

Romper URLs funcionales solo para personalizar el componente

Utiliza Estilo.

Construir 100 números manualmente

Necesitas una solución funcional apropiada.

Utilizar Pagination como Carousel

Son conceptos distintos.

Utilizar controles demasiado pequeños en celular

Mantén usabilidad.

Aplicar .active globalmente

Puede afectar muchos componentes.

Aplicar .nav-link globalmente

Puede afectar Header, Tabs y Nav Bar.

Aplicar .page-link globalmente sin scope

Puede modificar otras instancias.

Eliminar Classes estructurales de Bootstrap

Puede afectar diseño o comportamiento.

Copiar HTML de Bootstrap 5

Waclis utiliza Bootstrap 4.

Agregar JavaScript para un Link normal

No es necesario.

No probar los destinos mediante Ver página

Siempre comprueba la navegación real.

Flujo recomendado para Nav Bar

1. DEFINIR LA NAVEGACIÓN SECUNDARIA
↓
2. COMPROBAR QUE NO DUPLIQUE EL HEADER
↓
3. AGREGAR NAV BAR
↓
4. ABRIR NAVIGATOR
↓
5. IDENTIFICAR NAV ITEMS
↓
6. MODIFICAR TEXTOS
↓
7. CONFIGURAR URLS
↓
8. REVISAR TARGET
↓
9. CONFIGURAR HOVER / ACTIVE
↓
10. REVISAR RESPONSIVE
↓
11. GUARDAR CAMBIOS
↓
12. VER PÁGINA
↓
13. PROBAR TODOS LOS LINKS

Flujo recomendado para Breadcrumbs

1. DEFINIR LA JERARQUÍA REAL
↓
2. AGREGAR BREADCRUMBS
↓
3. UTILIZAR NAVIGATOR
↓
4. CONFIGURAR CADA NIVEL
↓
5. CONFIGURAR LOS LINKS SUPERIORES
↓
6. IDENTIFICAR LA PÁGINA ACTUAL
↓
7. REVISAR EL ORDEN
↓
8. REVISAR MOBILE
↓
9. GUARDAR CAMBIOS
↓
10. VER PÁGINA
↓
11. PROBAR TODOS LOS NIVELES

Flujo recomendado para Pagination

1. CONFIRMAR QUE EXISTE PAGINACIÓN REAL
↓
2. IDENTIFICAR LA FUNCIONALIDAD EXISTENTE
↓
3. AGREGAR / SELECCIONAR PAGINATION
↓
4. ABRIR NAVIGATOR
↓
5. IDENTIFICAR PREVIOUS / PAGES / NEXT
↓
6. CONSERVAR URLS Y PARÁMETROS FUNCIONALES
↓
7. COMPROBAR ACTIVE
↓
8. PERSONALIZAR ESTILO
↓
9. REVISAR RESPONSIVE
↓
10. GUARDAR CAMBIOS
↓
11. VER PÁGINA
↓
12. PROBAR ANTERIOR
↓
13. PROBAR NÚMEROS
↓
14. PROBAR SIGUIENTE

Checklist de Nav Bar

• La Nav Bar tiene una función clara.

• No duplica innecesariamente el menú principal.

• Las opciones pertenecen al mismo nivel.

• Los textos son claros.

• Cada Link tiene una URL correcta.

• No quedan URLs de elementos clonados.

• Target es coherente.

• Utilicé Navigator.

• Los IDs son únicos.

• Las Classes compartidas tienen sentido.

• Active representa correctamente la opción actual cuando corresponde.

• Hover es visible pero moderado.

• Desktop funciona.

• Tablet funciona.

• Celular funciona.

• Los Links no desbordan.

• No reduje excesivamente Font size.

• No apliqué CSS global a .navbar.

• No modifiqué Header.

• Probé todos los Links.

Checklist de Breadcrumbs

• La página necesita Breadcrumbs.

• La jerarquía es real.

• Los niveles están ordenados correctamente.

• Cada Link apunta al nivel correspondiente.

• El último elemento representa correctamente la página actual.

• No confundí Breadcrumbs con historial.

• No agregué categorías inexistentes.

• Revisé todos los niveles después de clonar.

• Utilicé Navigator.

• Los separadores son consistentes.

• Los Breadcrumbs pueden ocupar varias líneas en celular.

• No existe scroll horizontal inesperado.

• La apariencia es suficientemente discreta.

• Probé todos los Links.

Checklist de Pagination

• Existe una paginación funcional real.

• No agregué Pagination solamente como decoración.

• Los números corresponden a páginas reales.

• No hay Links con # en producción.

• Previous lleva al destino correcto.

• Next lleva al destino correcto.

• Los números llevan a páginas diferentes cuando corresponde.

• Active coincide con la página actual.

• No rompí parámetros o URLs funcionales.

• Utilicé Navigator.

• Los controles tienen tamaño suficiente.

• Desktop funciona.

• Tablet funciona.

• Celular funciona.

• Los controles no desbordan.

• No oculté números mediante CSS sin evaluar la funcionalidad.

• No agregué JavaScript innecesario.

• Probé todos los controles mediante Ver página.

Checklist general

• Sé qué función cumple cada componente.

• No confundí navegación local con navegación principal.

• No utilicé Nav Bar, Breadcrumbs o Pagination solo por estética.

• Utilicé Navigator.

• Los Links tienen destinos reales.

• No quedan URLs de ejemplo.

• Los IDs son únicos.

• Las Classes estructurales se conservaron.

• Linked styles tiene el alcance esperado.

• No utilicé .active global.

• No utilicé .nav-link global sin scope.

• No utilicé .navbar global para ocultar o modificar navegación.

• No sobrescribí .pagination globalmente sin necesidad.

• No copié estructuras de otra versión de Bootstrap.

• No agregué JavaScript cuando un Link normal era suficiente.

• Guardé los cambios.

• Revisé el resultado mediante Ver página.

• Probé realmente la navegación.

En resumen

Los tres componentes cumplen funciones diferentes:

NAV BAR
→ dónde puedo ir

BREADCRUMBS
→ dónde estoy

PAGINATION
→ qué parte de un conjunto paginado estoy recorriendo

Una Nav Bar puede ayudarte a crear navegación secundaria:

Consultoría | Implementación | Capacitación | Soporte

pero recuerda:

no reemplaza automáticamente el menú principal del Header de Waclis.

Si la colocas debajo del menú principal,

es una navegación adicional dentro del contenido.

Breadcrumbs

pueden representar:

Inicio > Productos > Categoría > Producto

pero deben reflejar una jerarquía real.

No representan necesariamente:

“las páginas que el usuario visitó antes”.

Y si los construyes manualmente:

debes mantener sus textos y URLs actualizados.

Pagination

es el componente con la advertencia funcional más importante.

Puedes mostrar:

Anterior   1   2   3   Siguiente

pero eso:

no divide automáticamente el contenido en páginas.

Para que exista paginación real debe haber una lógica que determine:

• contenido de cada página;

• página actual;

• Previous;

• Next;

• URLs o destinos.

Por eso no publiques:

1 2 3

si todos llevan a:

#

o no hacen nada.

Cuando trabajes con estos componentes

utiliza:

Navigator

para identificar:

Nav Item
Breadcrumb Item
Page Item
Link

y modifica la unidad correcta.

Al clonar

recuerda siempre:

TEXTO
+
URL
+
ID
+
ESTADO

También evita CSS global como:

.navbar {
    ...
}

porque podrías modificar el Header de la Página web,

o:

.active {
    ...
}

porque puede afectar:

• Tabs;

• navegación;

• Pagination;

• otros componentes.

Utiliza una Class propia como scope.

Finalmente:

Configurar navegación → revisar Navigator → comprobar Links → revisar responsive → Guardar Cambios → Ver página → probar cada control.

La navegación debe reducir el esfuerzo del visitante.

Si agregar un nuevo componente hace que el usuario tenga que preguntarse:

“¿Cuál de todos estos menús tengo que usar?”

entonces probablemente estás agregando demasiada navegación.

Una buena navegación debe permitir que el visitante comprenda rápidamente:

dónde está, dónde puede ir y, cuando existe un conjunto paginado, cómo continuar recorriéndolo.