Ruta de navegación

Ruta de navegación en Storybook

Uso

Descripción general

La ruta de navegación es un componente de navegación secundario que ayuda a los usuarios a identificar su ubicación actual y les permite pasar a un nivel principal o a un paso anterior. Está compuesto por enlaces de texto y cada enlace en una ruta de navegación representa una página, un nivel superior, a la que los usuarios pueden acceder rápidamente.

Las rutas de navegación son un elemento de navegación importante que respalda la búsqueda de caminos, lo que hace que los usuarios sepan su ubicación actual dentro de la estructura jerárquica de una aplicación.

Cuándo se debe utilizar

• Productos y experiencias con jerarquías que tengan más de dos niveles de profundidad.
• Desea informar al usuario dónde se encuentra en la jerarquía de información de la aplicación.
• Lo más probable es que el usuario haya llegado a la página desde una fuente externa.

Cuándo no se debe utilizar

• Como la forma principal de navegar por una aplicación o sitio.
• Para productos que tengan navegación de un solo nivel.
• Para ayudar a los usuarios a realizar un seguimiento de su progreso durante un proceso de varios pasos. En cambio, utilice uno de los componentes de indicador de progreso.

Formato

Anatomía

El componente ruta de navegación consta de los siguientes elementos:

1. Enlace de texto: Las rutas de navegación aparecen como enlace de texto activo con un relleno azul, como los hipervínculos. Dirigen a los usuarios a la página de nivel principal.
2. Separador de enlaces de texto: El separador proporciona una indicación visual de la separación entre páginas. Utiliza la misma fuente que el enlace de texto. Los separadores no son interactivos.
3. Elemento actual: El elemento de la ruta de navegación para la página que el usuario está viendo actualmente. Aparece como texto sin formato.

Ubicación

Ubique las rutas de navegación en la parte superior izquierda de la página.

Prácticas recomendadas

• Todos los elementos de la ruta de navegación (excepto la página actual) deben representar un lugar al que el usuario puede ir. Si hay una categoría lógica que no tiene una página asociada, no la incluya en la ruta de navegación.
• Las rutas de navegación generalmente comienzan con la página de inicio. Sin embargo, si la navegación global incluye un enlace a la página de inicio, no incluya el enlace de la página de inicio en la ruta de navegación.
• Las rutas de navegación tienen como objetivo mostrar la estructura jerárquica del sitio, no el historial de las páginas recorridas.
• Asegúrese de que todos los elementos del rastro de rutas de navegación, excepto la página actual, sean enlaces activos.
• En los dispositivos móviles, no ajuste las rutas de navegación en varias líneas. Considere acortarlas para que incluyan solo el último nivel.

Fuente: Nielsen Norman Group

Contenido

Pautas generales de redacción

• En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
• Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
• Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
• Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
• Las palabras y las oraciones deben ser breves.

Enlaces de página

• Las palabras en el enlace de texto de la ruta de navegación deben ser precisas, específicas y explícitas, no vagas.
• Los usuarios nunca deben sorprenderse por lo que sucede después de hacer clic o tocar un enlace de texto.
• Idealmente, los rótulos de rutas de navegación usan mayúsculas como se usan en las oraciones, si las páginas vinculadas tienen ese uso de las mayúsculas y minúsculas.

Utilice un rotulado preciso y específico.

No utilice rótulos vagos o ambiguos.

Comportamientos

• Si solo hay un elemento para mostrar, la ruta de navegación no se renderiza. Esto significa que el usuario se encuentra en el nivel superior de una estructura de navegación.
• Si solo hay dos elementos para mostrar, el componente renderiza un botón Atrás.
• Si hay más de dos elementos para mostrar, el componente renderiza las rutas de navegación habituales.

Estados

Las rutas de navegación tienen los mismos estados interactivos que el componente enlace.

Interacciones

Teclado

Navegue hasta los enlaces con la tecla TAB. Active el enlace con la tecla INTRO.

Lector de pantalla

El rol aria de 'navigation' y aria-label='breadcrumb' se incluyen para proporcionar más contexto a los usuarios de lectores de pantalla. Del mismo modo, cuando la casilla de verificación 'lastItemClickable' está habilitada, el enlace final en la ruta de navegación adopta el valor aria-current="page" para identificar la página actual.

Accesibilidad

Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:

• La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
• El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
• El elemento se puede operar con teclado, así como con mouse.
• Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.

El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.

Consulte la guía a continuación y también las Prácticas de creación de WAI-ARIA para rutas de navegación. Los aspectos que se deben tener en cuenta incluyen lo siguiente:

• La ruta de navegación debe permanecer en la misma ubicación en cada página.
• El texto del enlace debe ser claro y comprensible.

Código

<Breadcrumb
  links={[
    {
      href: 'grandparent-url',
      text: 'Grandparent Page',
    },
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Instrucción de importación

import { Breadcrumb } from '@jutro/router';

Contrato de componentes

Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.

Propiedades

backLinkWithoutText

Tipo

boolean

Descripción

If set to true, the back link renders as just an "arrow" icon. If set to false, it also includes the word "Back". The showTwoBreadcrumbs property takes precedence over this property.

className

Tipo

string

Descripción

CSS class name for this component.

lastItemClickable

Tipo

boolean

Descripción

If set to true, the last item in the breadcrumb is also a link.

links

Tipo

({text: IntlMessageShape, href: IntlMessageShape} & Link)[]

className

Tipo

string

Descripción

CSS class name for this component.

href

Tipo

IntlMessageShape

Descripción

URL or path for the link.

Link

Tipo

Link

Descripción

Additional properties from the Link component.

Descripción

Takes an array of objects, one per each link to be displayed.

renderLinkTrigger

Tipo

Link

Descripción

RenderProp function to generate each individual link that makes up the breadcrumbs. Uses the properties from the Link component.

showTwoBreadcrumbs

Tipo

boolean

Descripción

If set to true, breadcrumbs for both the parent and the current page are displayed if there are only two breadcrumbs. If set to false, the back link renders as an arrow with or without text depending on backLinkWithoutText.

Ganchos

No hay ganchos para Ruta de navegación.

Claves de traducción

No hay traducciones para Ruta de navegación.

Para obtener información sobre cómo gestionar las traducciones, consulte nuestra sección sobre internacionalización.

Escotillas de escape

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

Ejemplos

Consulte la sección Uso para obtener detalles sobre cómo diseñar una ruta de navegación correctamente y las diferentes opciones de configuración que ofrecemos.

Ejemplo básico

Agregue un componente de navegación secundario para mostrar a un usuario su ubicación actual con respecto a los niveles principales.

<Breadcrumb
  links={[
    {
      href: 'grandparent-url',
      text: 'Grandparent Page',
    },
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Ejemplo de último elemento en el que se puede hacer clic

De forma predeterminada, el último elemento no es un enlace en el que se pueda hacer clic; sin embargo, puede cambiar esto mediante la propiedad lastItemClickable.

<Breadcrumb
  lastItemClickable={true}
  links={[
    {
      href: 'grandparent-url',
      text: 'Grandparent Page',
    },
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      href: 'current-url',
      text: 'Current Page',
    },
  ]}
/>

Ejemplo de enlace de retroceso

Si solo hay un elemento principal, el componente se renderiza como un enlace con el texto “Atrás” y una flecha hacia la izquierda. La propiedad showTwoBreadcrumbs tiene prioridad sobre esta propiedad.

<Breadcrumb
  links={[
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Ejemplo de enlace de retroceso sin texto

Si solo hay un elemento principal y la propiedad backLinkWithoutText es true, el componente se renderiza como una flecha orientada hacia la izquierda. La propiedad showTwoBreadcrumbs tiene prioridad sobre esta propiedad.

<Breadcrumb
  backLinkWithoutText={true}
  links={[
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Ejemplo de cómo se muestran dos rutas de navegación

Si hay exactamente dos elementos de ruta de navegación y showTwoBreadcrumbs se establece en true, el componente renderiza tanto la página principal como la actual como rutas de navegación en las que se puede hacer clic. Si showTwoBreadcrumbs es false, un vínculo de retroceso se renderiza como una flecha, con o sin texto, según backLinkWithoutText.

<Breadcrumb
  showTwoBreadcrumbs={true}
  links={[
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      href: 'current-url',
      text: 'Current Page',
    },
  ]}
/>

Registro de cambios

10.12.0

La propiedad showTwoBreadcrumbs se agregó para permitir la visualización de ambos enlaces de ruta de navegación si solo hay dos enlaces de ruta de navegación: la página actual y la página “inicio”. Anteriormente, siempre se mostraba una flecha hacia atrás (con o sin texto).

10.9.0

• Se introdujo una nueva característica de opción de participación que desactiva la publicación automática de eventos para el componente Breadcrumb. Puede habilitar esta función agregando JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true al archivo .env en la raíz de su aplicación de Jutro. Cuando esta acción está habilitada, los componentes heredados ya no publican eventos de forma predeterminada. Para obtener más información sobre los eventos y cómo configurar nuevos, consulte la documentación sobre eventos.

10.4.0

• Se agregó compatibilidad para tokens de diseño.