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

Mostrar parámetros

Parámetros Nunjucks del componente: "Breadcrumbs"

              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ódigo

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"
    }
  ]
}) }}

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-hidden 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-hidden 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ódigo

Contenido

Nunjucks macro

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

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  flex-1 font-semibold">
      <a class="underline focus:bg-warning-base focus:outline-hidden 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ódigo

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"
    }
  ]
}) }}

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-hidden 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-hidden 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-hidden 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-hidden 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 #

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor

Mostrar código

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"
    }
  ]
}) }}

HTML

<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
  <ol class="lg:grid lg:grid-cols-(--grid-template-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 ">
      <span class="no-underline truncate">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
      </span>
    </li>
    <li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark ">
      <span class="no-underline truncate">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
      </span>
    </li>
    <li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark ">
      <span class="no-underline truncate">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
      </span>
    </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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor</strong>
      </span>
    </li>
  </ol>
</nav>
<!-- /breadcrumbs -->

Ú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.

Mostrar código

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"
    }
  ]
}) }}

HTML

<!-- breadcrumbs -->
<nav class="c-breadcrumbs c-breadcrumbs--truncated" aria-label="Estás en: ">
  <ol class="lg:grid lg:grid-cols-(--grid-template-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 ">
      <span class="no-underline truncate">
        Inicio
      </span>
    </li>
    <li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark ">
      <span class="no-underline truncate">
        Actividades industriales y energía
      </span>
    </li>
    <li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark ">
      <span class="no-underline truncate">
        Ayudas ligadas al autoconsumo, almacenamiento y sistemas térmicos con fuentes de energía renovable renovables
      </span>
    </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>Programa 1 Instalaciones de autoconsumo renovable en el sector servicios con o sin almacenamiento</strong>
      </span>
    </li>
  </ol>
</nav>
<!-- /breadcrumbs -->

Item a mitad sin href #

Mostrar código

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"
    }
  ]
}) }}

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-hidden 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-hidden 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-hidden 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ódigo

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"
    }
  ]
}) }}

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-hidden 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-hidden 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-hidden 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ódigo

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"
    }
  ]
}) }}

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-hidden 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-hidden 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ódigo

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-(--grid-template-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-hidden 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-hidden 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-hidden 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ódigo

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-(--grid-template-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-hidden 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-hidden 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-hidden 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-hidden 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-hidden 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-hidden 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-hidden 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-hidden 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ódigo

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-hidden 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-hidden 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-hidden 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-hidden 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-hidden 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-hidden 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-hidden 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-hidden 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ódigo

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-hidden 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-hidden 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-hidden 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-hidden 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-hidden 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-hidden 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-hidden 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-hidden 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ódigo

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-(--grid-template-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-hidden 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"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' focusable='false' width='1em' height='1em'>
            <path d='M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z' fill='currentColor'></path>
          </svg></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-hidden 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-hidden 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ódigo

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-(--grid-template-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-hidden 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"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' focusable='false' width='1em' height='1em'>
            <path d='M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z' fill='currentColor'></path>
          </svg></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-hidden 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-hidden 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-hidden 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-hidden 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 #

Volver a la página anterior
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor

Mostrar código

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"
    }
  ]
}) }}

HTML

<!-- breadcrumbs -->
<nav class="c-breadcrumbs c-breadcrumbs--truncated" aria-label="Estás en: ">
  <ol class="lg:grid lg:grid-cols-(--grid-template-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-hidden 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"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' focusable='false' width='1em' height='1em'>
            <path d='M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z' fill='currentColor'></path>
          </svg></span></a>
    </li>
    <li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark ">
      <span class="no-underline truncate">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
      </span>
    </li>
    <li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark ">
      <span class="no-underline truncate">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
      </span>
    </li>
    <li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark ">
      <span class="no-underline truncate">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor
      </span>
    </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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor</strong>
      </span>
    </li>
  </ol>
</nav>
<!-- /breadcrumbs -->

Componentes Índice de páginas

Migas de pan

Breadcrumbs

Por defecto #

Contenido

Nunjucks macro

HTML

Con 1 sólo nivel #

Contenido

Nunjucks macro

HTML

Con múltiples niveles #

Contenido

Nunjucks macro

HTML

Con cadenas muy largas #

Contenido

Nunjucks macro

HTML

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

Contenido

Nunjucks macro

HTML

Item a mitad sin href #

Contenido

Nunjucks macro

HTML

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

Contenido

Nunjucks macro

HTML

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

Contenido

Nunjucks macro

HTML

Con colapsar en móvil #

Contenido

Nunjucks macro

HTML

Con inline en móvil #

Contenido

Nunjucks macro

HTML

Con inline en desktop #

Contenido

Nunjucks macro

HTML

Con inline en mobile y en desktop #

Contenido

Nunjucks macro

HTML

Con botón atrás #

Contenido

Nunjucks macro

HTML

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

Contenido

Nunjucks macro

HTML

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

Contenido

Nunjucks macro

HTML