Breadcrumbs
Mostrar parámetros
Parámetros del componente
params:
- name: items
type: array
required: true
description: Array of breadcrumbs item objects.
params:
- name: text
type: string
required: true
description: If `html` is set, this is not required. Text to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored.
- name: html
type: string
required: true
description: If `text` is set, this is not required. HTML to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored.
- name: href
type: string
required: false
description: Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item.
- name: attributes
type: object
description: HTML attributes (for example data attributes) to add to the individual crumb.
- name: classes
type: string
required: false
description: Classes to add to the breadcrumbs container.
- name: collapseOnMobile
type: boolean
required: false
description: When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below.
- name: inlineOnMobile
type: boolean
required: false
description: When true, the breadcrumbs will linebreak if there is needed only on tablet breakpoint and below.
- name: inlineOnDesktop
type: boolean
required: false
description: When true, the breadcrumbs will linebreak if there is needed only on desktop breakpoint and above.
- name: hasBackButton
type: boolean
required: false
description: When true, the breadcrumbs will start with a back button link.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the breadcrumbs container.
Por defecto #
Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
"items": [
{
"text": "Sección",
"href": "/section"
},
{
"text": "Sub-sección",
"href": "/section/sub-section"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-2 w-full items-baseline text-sm">
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/section">
Sección
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black flex-1 font-semibold">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/section/sub-section" aria-current="page">
<strong>Sub-sección</strong>
</a>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->
Con 1 sólo nivel #
Mostrar códigodel ejemplo: Con 1 sólo nivel
Contenido
Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
"items": [
{
"text": "Sección",
"href": "/section"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-1 w-full items-baseline text-sm">
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black flex-1 font-semibold">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/section" aria-current="page">
<strong>Sección</strong>
</a>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->
Con múltiples niveles #
Mostrar códigodel ejemplo: Con múltiples niveles
Contenido
Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
"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"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-4 w-full items-baseline text-sm">
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Inicio
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/section">
Sección
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/section/sub-section">
Sub-sección
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black flex-1 font-semibold">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/section/sub-section/sub-sub-section" aria-current="page">
<strong>Sub Sub-sección</strong>
</a>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->
Con cadenas muy largas #
Por defecto, si los items no caben enteros, se truncan y ocupan el espacio de forma equitativa.
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",
"href": "/"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
"href": "/"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
"href": "/"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
"href": "/"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-4 w-full items-baseline text-sm">
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black flex-1 font-semibold">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/" aria-current="page">
<strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor</strong>
</a>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->
Último item más largo y con truncado en cadenas largas #
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.
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",
"href": "/"
},
{
"text": "Actividades industriales y energía",
"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": "/"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs c-breadcrumbs--truncated" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-4 w-full items-baseline text-sm">
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Inicio
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Actividades industriales y energía
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Ayudas ligadas al autoconsumo, almacenamiento y sistemas térmicos con fuentes de energía renovable renovables
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black flex-1 font-semibold">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/" aria-current="page">
<strong>Programa 1 Instalaciones de autoconsumo renovable en el sector servicios con o sin almacenamiento</strong>
</a>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->
Item a mitad sin href #
Mostrar códigodel ejemplo: Item a mitad sin href
Contenido
Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
"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"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-4 w-full items-baseline text-sm">
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Inicio
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark ">
<span class="no-underline truncate">
Section
</span>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/section/sub-section">
Sub-sección
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black flex-1 font-semibold">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/section/sub-section/sub-sub-section" aria-current="page">
<strong>Sub Sub-sección</strong>
</a>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->
Con la última miga de pan como página actual con href #
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({
"items": [
{
"text": "Inicio",
"href": "/"
},
{
"text": "Trámites por tema",
"href": "/tramites/tema"
},
{
"text": "Vivienda",
"href": "/tramites/tema/vivienda"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-3 w-full items-baseline text-sm">
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Inicio
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/tramites/tema">
Trámites por tema
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black flex-1 font-semibold">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/tramites/tema/vivienda" aria-current="page">
<strong>Vivienda</strong>
</a>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->
Con la última miga de pan como página actual sin href #
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({
"items": [
{
"text": "Inicio",
"href": "/"
},
{
"text": "Trámites por tema",
"href": "/tramites/tema"
},
{
"text": "Vivienda"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-3 w-full items-baseline text-sm">
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Inicio
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/tramites/tema">
Trámites por tema
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark flex-1 font-semibold">
<span class="no-underline text-black truncate" aria-current="page">
<strong>Vivienda</strong>
</span>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->
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.
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"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs c-breadcrumbs--collapse-on-mobile" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-3 w-full items-baseline text-sm">
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Inicio
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/tramites/tema">
Trámites por tema
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black flex-1 font-semibold">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/tramites/tema/vivienda" aria-current="page">
<strong>Vivienda</strong>
</a>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->
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.
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": "/"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs c-breadcrumbs--inline-on-mobile" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-8 w-full items-baseline text-sm">
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Inicio
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Trámites
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Categorías de trámites
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Actividades industriales y energía
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Actividades industriales
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Instalaciones industriales
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Ayudas ligadas al autoconsumo
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black flex-1 font-semibold">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/" aria-current="page">
<strong>Programa 1 Instalaciones de autoconsumo</strong>
</a>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->
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.
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": "/"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs c-breadcrumbs--inline-on-desktop" aria-label="Estás en: ">
<ol class=" w-full items-baseline text-sm">
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Inicio
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Trámites
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Categorías de trámites
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Actividades industriales y energía
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Actividades industriales
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Instalaciones industriales
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Ayudas ligadas al autoconsumo, almacenamiento y sistemas térmicos con fuentes de energía renovable renovables
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black flex-1 font-semibold">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/" aria-current="page">
<strong>Programa 1 Instalaciones de autoconsumo renovable en el sector servicios con o sin almacenamiento</strong>
</a>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->
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.
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": "/"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs c-breadcrumbs--inline-on-mobile c-breadcrumbs--inline-on-desktop" aria-label="Estás en: ">
<ol class=" w-full items-baseline text-sm">
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Inicio
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Trámites
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Categorías de trámites
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Actividades industriales y energía
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Actividades industriales
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Instalaciones industriales
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Ayudas ligadas al autoconsumo
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black flex-1 font-semibold">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/" aria-current="page">
<strong>Programa 1 Instalaciones de autoconsumo</strong>
</a>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->
Con botón atrás #
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"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-4 w-full items-baseline text-sm">
<li class="c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base">
<a href="javascript:history.back()" class="px-sm border-r border-neutral-base focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"><span class="sr-only">Volver a la página anterior</span><span aria-hidden="true" title="Volver a la página anterior">←</span></a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Inicio
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/tramites/tema">
Trámites por tema
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark flex-1 font-semibold">
<span class="no-underline text-black truncate" aria-current="page">
<strong>Vivienda</strong>
</span>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->
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.
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"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs c-breadcrumbs--collapse-on-mobile" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-5 w-full items-baseline text-sm">
<li class="c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base">
<a href="javascript:history.back()" class="px-sm border-r border-neutral-base focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"><span class="sr-only">Volver a la página anterior</span><span aria-hidden="true" title="Volver a la página anterior">←</span></a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/">
Inicio
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/tramites/tema">
Trámites por tema
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/tramites/tema/vivienda">
Vivienda
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black flex-1 font-semibold">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/tramites/tema/vivienda/urbanismo" aria-current="page">
<strong>Urbanismo</strong>
</a>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->
Con botón atrás y la clase modificadora para truncar texto #
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",
"href": "#"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
"href": "#"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
"href": "#"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
"href": "#"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs c-breadcrumbs--truncated" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-5 w-full items-baseline text-sm">
<li class="c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base">
<a href="javascript:history.back()" class="px-sm border-r border-neutral-base focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"><span class="sr-only">Volver a la página anterior</span><span aria-hidden="true" title="Volver a la página anterior">←</span></a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="#">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="#">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="#">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black flex-1 font-semibold">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="#" aria-current="page">
<strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor</strong>
</a>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->