DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Migas de pan

Navegación

Los breadcrumbs o migas de pan sirven para identificar dónde nos encontramos dentro de la página web o aplicación. También nos ofrece una navegación secundaria hacia los niveles ascendentes de la página actual.

Breadcrumbs

Por defecto

Descripción visual

Breadcrumb horizontal con dos elementos de texto enlazados separados por chevrones (>) grises. Fondo blanco con borde gris claro de 1px. Texto de los enlaces en negro, peso normal, tamaño mediano.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "inlineOnMobile": true,
  "inlineOnDesktop": true,
  "items": [
    {
      "text": "Sección",
      "href": "/section"
    },
    {
      "text": "Sub-sección",
      "href": "/section/sub-section"
    }
  ]
}) }}

Con 1 sólo nivel

Descripción visual

Breadcrumb horizontal con un único elemento de texto enlazado. Fondo blanco con borde gris claro de 1px. Texto del enlace en negro, peso normal, tamaño mediano, sin separadores visibles.

Mostrar códigodel ejemplo: Con 1 sólo nivel

Contenido

Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "inlineOnMobile": true,
  "inlineOnDesktop": true,
  "items": [
    {
      "text": "Sección",
      "href": "/section"
    }
  ]
}) }}

Con múltiples niveles

Descripción visual

Breadcrumb horizontal con cuatro elementos de texto enlazados separados por chevrones (>) grises. Fondo blanco con borde gris claro de 1px. Texto de todos los enlaces en negro, peso normal, tamaño mediano, distribuidos en línea horizontal.

Mostrar códigodel ejemplo: Con múltiples niveles

Contenido

Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "inlineOnMobile": true,
  "inlineOnDesktop": true,
  "items": [
    {
      "text": "Inicio",
      "href": "/"
    },
    {
      "text": "Sección",
      "href": "/section"
    },
    {
      "text": "Sub-sección",
      "href": "/section/sub-section"
    },
    {
      "text": "Sub Sub-sección",
      "href": "/section/sub-section/sub-sub-section"
    }
  ]
}) }}

Con cadenas muy largas

Sólo si las migas de pan son informativas y no son enlaces, puedes prescindir de los parámetros 'inlineOnMobile':true y 'inlineOnDesktop':true. De esta forma, si los items no caben enteros, se truncan y ocupan el espacio de forma equitativa.

Descripción visual

Breadcrumb horizontal con fondo blanco y borde gris claro. Contiene título negro en negrita a la izquierda, seguido de cuatro enlaces de texto negro separados por flechas grises (">"). Los enlaces ocupan toda la línea horizontal con espaciado uniforme entre elementos.

Mostrar códigodel ejemplo: Con cadenas muy largas

Contenido

Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "items": [
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
    }
  ]
}) }}

Último item más largo y con truncado en cadenas largas

Sólo si las migas de pan son informativas y no son enlaces, puedes prescindir de los parámetros 'inlineOnMobile':true y 'inlineOnDesktop':true. Usa la clase .c-breadcrumbs--truncated para hacer que los items se trunquen solo si tienen mucha anchura (mayor que 20rem), como el penúltimo item de este ejemplo. Y que el último item ocupe el espacio restante, truncándose si es necesario, al final, si no le queda espacio suficiente.

Descripción visual

Breadcrumb horizontal con fondo blanco y borde gris claro. Título negro en negrita ubicado arriba a la izquierda. Debajo se despliegan cinco enlaces de texto negro separados por flechas grises (">"), donde el último enlace aparece truncado con puntos suspensivos al final.

Mostrar códigodel ejemplo: Último item más largo y con truncado en cadenas largas

Contenido

Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "classes": "c-breadcrumbs--truncated",
  "items": [
    {
      "text": "Inicio"
    },
    {
      "text": "Actividades industriales y energía"
    },
    {
      "text": "Ayudas ligadas al autoconsumo, almacenamiento y sistemas térmicos con fuentes de energía renovable renovables"
    },
    {
      "text": "Programa 1 Instalaciones de autoconsumo renovable en el sector servicios con o sin almacenamiento"
    }
  ]
}) }}

Item a mitad sin href

Descripción visual

Breadcrumb horizontal con fondo blanco y borde gris claro. Título negro en negrita en la parte superior. Ruta de navegación compuesta por cinco elementos de texto negro separados por flechas grises (">"), todos con peso de fuente normal y alineación horizontal consistente.

Mostrar códigodel ejemplo: Item a mitad sin href

Contenido

Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "inlineOnMobile": true,
  "inlineOnDesktop": true,
  "items": [
    {
      "text": "Inicio",
      "href": "/"
    },
    {
      "text": "Section"
    },
    {
      "text": "Sub-sección",
      "href": "/section/sub-section"
    },
    {
      "text": "Sub Sub-sección",
      "href": "/section/sub-section/sub-sub-section"
    }
  ]
}) }}

Con la última miga de pan como página actual con href

Descripción visual

Breadcrumb horizontal con fondo blanco y borde gris claro de 1px. Contiene enlaces en texto negro estándar separados por flechas ">" en gris, donde el último elemento aparece en texto negro en negrita subrayado indicando que es interactivo. Espaciado uniforme entre elementos con padding interno visible.

Mostrar códigodel ejemplo: Con la última miga de pan como página actual con href

Contenido

Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "inlineOnMobile": true,
  "inlineOnDesktop": true,
  "items": [
    {
      "text": "Inicio",
      "href": "/"
    },
    {
      "text": "Trámites por tema",
      "href": "/tramites/tema"
    },
    {
      "text": "Vivienda",
      "href": "/tramites/tema/vivienda"
    }
  ]
}) }}

Con la última miga de pan como página actual sin href

Descripción visual

Breadcrumb horizontal con fondo blanco y borde gris claro de 1px. Muestra enlaces en texto negro estándar separados por separadores de flecha ">" en gris, donde el último elemento aparece en texto negro en negrita sin subrayado. Espaciado consistente entre todos los elementos con padding interno.

Mostrar códigodel ejemplo: Con la última miga de pan como página actual sin href

Contenido

Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "inlineOnMobile": true,
  "inlineOnDesktop": true,
  "items": [
    {
      "text": "Inicio",
      "href": "/"
    },
    {
      "text": "Trámites por tema",
      "href": "/tramites/tema"
    },
    {
      "text": "Vivienda"
    }
  ]
}) }}

Con colapsar en móvil

Mirar en anchuras pequeñas para ver cómo se colapsan los items intermedios y sólo se muestran el primero y último.

Descripción visual

Breadcrumb horizontal con fondo blanco y borde gris claro de 1px. Presenta enlaces en texto negro estándar separados por flechas ">" en gris, con el último elemento en texto negro en negrita. Diseño compacto optimizado para pantallas pequeñas con espaciado reducido entre elementos.

Mostrar códigodel ejemplo: Con colapsar en móvil

Contenido

Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "collapseOnMobile": true,
  "items": [
    {
      "text": "Inicio",
      "href": "/"
    },
    {
      "text": "Trámites por tema",
      "href": "/tramites/tema"
    },
    {
      "text": "Vivienda",
      "href": "/tramites/tema/vivienda"
    }
  ]
}) }}

Con inline en móvil

Usa 'inlineOnMobile':true para hacer que los elementos se pongan en linea en móvil en lugar de truncarse. Mirar en anchuras pequeñas para ver cómo se genera un salto de línea si el texto no cabe. Si se quiere también en desktop, usar el parámetro inlineOnDesktop. Ten cuidado con las cadenas largas en mobile: podrían desbordar el viewport, producir scroll horizontal y no cumplir accesibilidad.

Descripción visual

Breadcrumb horizontal con fondo blanco y borde gris claro de 1px. Los enlaces de navegación aparecen en color azul oscuro separados por chevrons (>) grises, con el último elemento en texto negro negrita. Padding interno visible alrededor del contenido.

Mostrar códigodel ejemplo: Con inline en móvil

Contenido

Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "inlineOnMobile": true,
  "items": [
    {
      "text": "Inicio",
      "href": "/"
    },
    {
      "text": "Trámites",
      "href": "/"
    },
    {
      "text": "Categorías de trámites",
      "href": "/"
    },
    {
      "text": "Actividades industriales y energía",
      "href": "/"
    },
    {
      "text": "Actividades industriales",
      "href": "/"
    },
    {
      "text": "Instalaciones industriales",
      "href": "/"
    },
    {
      "text": "Ayudas ligadas al autoconsumo",
      "href": "/"
    },
    {
      "text": "Programa 1 Instalaciones de autoconsumo",
      "href": "/"
    }
  ]
}) }}

Con inline en desktop

Usa 'inlineOnDesktop':true para hacer que los elementos se pongan en linea en escritorio y anchuras superiores, en lugar de truncarse. Se genera un salto de línea si el texto no cabe en escritorio, no en mobile. Si se quiere también en mobile, usar el parámetro inlineOnMobile.

Descripción visual

Breadcrumb horizontal con fondo gris muy claro y borde gris medio de 1px. Los enlaces de navegación aparecen en color azul estándar separados por chevrons (>) grises, con el último elemento en texto negro regular. Incluye dos líneas de navegación, la segunda con texto negro regular de menor tamaño.

Mostrar códigodel ejemplo: Con inline en desktop

Contenido

Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "inlineOnDesktop": true,
  "items": [
    {
      "text": "Inicio",
      "href": "/"
    },
    {
      "text": "Trámites",
      "href": "/"
    },
    {
      "text": "Categorías de trámites",
      "href": "/"
    },
    {
      "text": "Actividades industriales y energía",
      "href": "/"
    },
    {
      "text": "Actividades industriales",
      "href": "/"
    },
    {
      "text": "Instalaciones industriales",
      "href": "/"
    },
    {
      "text": "Ayudas ligadas al autoconsumo, almacenamiento y sistemas térmicos con fuentes de energía renovable renovables",
      "href": "/"
    },
    {
      "text": "Programa 1 Instalaciones de autoconsumo renovable en el sector servicios con o sin almacenamiento",
      "href": "/"
    }
  ]
}) }}

Con inline en mobile y en desktop

Usa 'inlineOnMobile':true y 'inlineOnDesktop':true para hacer que los elementos se pongan en linea en todas las anchuras. Se genera un salto de línea si el texto no cabe en escritorio y en mobile. Ten cuidado con las cadenas largas en mobile: podrían desbordar el viewport, producir scroll horizontal y no cumplir accesibilidad.

Descripción visual

Breadcrumb horizontal con fondo blanco y borde gris claro de 1px. Los enlaces de navegación aparecen en color azul oscuro separados por chevrons (>) grises, con el último elemento en texto negro negrita. Padding interno uniforme alrededor del contenido de navegación.

Mostrar códigodel ejemplo: Con inline en mobile y en desktop

Contenido

Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "inlineOnMobile": true,
  "inlineOnDesktop": true,
  "items": [
    {
      "text": "Inicio",
      "href": "/"
    },
    {
      "text": "Trámites",
      "href": "/"
    },
    {
      "text": "Categorías de trámites",
      "href": "/"
    },
    {
      "text": "Actividades industriales y energía",
      "href": "/"
    },
    {
      "text": "Actividades industriales",
      "href": "/"
    },
    {
      "text": "Instalaciones industriales",
      "href": "/"
    },
    {
      "text": "Ayudas ligadas al autoconsumo",
      "href": "/"
    },
    {
      "text": "Programa 1 Instalaciones de autoconsumo",
      "href": "/"
    }
  ]
}) }}

Con botón atrás

Descripción visual

Breadcrumb horizontal con fondo blanco y borde gris claro de 1px. Contiene flecha izquierda gris al inicio, seguida de enlaces de texto gris separados por chevrones grises. El último elemento de texto aparece en color negro indicando estado activo.

Mostrar códigodel ejemplo: Con botón atrás

Contenido

Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "hasBackButton": true,
  "items": [
    {
      "text": "Inicio",
      "href": "/"
    },
    {
      "text": "Trámites por tema",
      "href": "/tramites/tema"
    },
    {
      "text": "Vivienda"
    }
  ]
}) }}

Con botón atrás y colapsar en móvil

Mirar en anchuras pequeñas para ver cómo se colapsan los items intermedios y sólo se muestran el primero y último.

Descripción visual

Breadcrumb horizontal con fondo blanco y borde gris claro de 1px. Incluye flecha izquierda gris al inicio, seguida de cuatro segmentos de texto gris separados por chevrones grises. El último segmento aparece en negro indicando estado activo.

Mostrar códigodel ejemplo: Con botón atrás y colapsar en móvil

Contenido

Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "collapseOnMobile": true,
  "hasBackButton": true,
  "items": [
    {
      "text": "Inicio",
      "href": "/"
    },
    {
      "text": "Trámites por tema",
      "href": "/tramites/tema"
    },
    {
      "text": "Vivienda",
      "href": "/tramites/tema/vivienda"
    },
    {
      "text": "Urbanismo",
      "href": "/tramites/tema/vivienda/urbanismo"
    }
  ]
}) }}

Con botón atrás y la clase modificadora para truncar texto

Descripción visual

Breadcrumb horizontal con fondo blanco y borde gris claro de 1px. Presenta flecha izquierda gris seguida de tres segmentos de texto largo con puntos suspensivos, separados por chevrones grises. El último segmento aparece en negro con texto truncado terminando en "M...".

Mostrar códigodel ejemplo: Con botón atrás y la clase modificadora para truncar texto

Contenido

Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
  "hasBackButton": true,
  "classes": "c-breadcrumbs--truncated",
  "items": [
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor"
    }
  ]
}) }}