Breadcrumbs

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 -->
          

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}

{{ componentBreadcrumbs({
  "items": [
    {
      "text": "Sección",
      "href": "/section"
    },
    {
      "text": "Sub-sección",
      "href": "/section/sub-section"
    }
  ]
}) }}

Ejemplo: "Con 1 sólo nivel", de código HTML, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 -->
          

Ejemplo: "Con 1 sólo nivel", de código Nunjucks, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}

{{ componentBreadcrumbs({
  "items": [
    {
      "text": "Sección",
      "href": "/section"
    }
  ]
}) }}

Ejemplo: "Con múltiples niveles", de código HTML, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 -->
          

Ejemplo: "Con múltiples niveles", de código Nunjucks, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

Ejemplo: "Con cadenas muy largas", de código HTML, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 -->
          

Ejemplo: "Con cadenas muy largas", de código Nunjucks, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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": "/"
    }
  ]
}) }}

Ejemplo: "Último item más largo y con truncado en cadenas largas", de código HTML, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 -->
          

Ejemplo: "Último item más largo y con truncado en cadenas largas", de código Nunjucks, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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": "/"
    }
  ]
}) }}

Ejemplo: "Item a mitad sin href", de código HTML, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 -->
          

Ejemplo: "Item a mitad sin href", de código Nunjucks, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

Ejemplo: "Con la última miga de pan como página actual con href", de código HTML, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 -->
          

Ejemplo: "Con la última miga de pan como página actual con href", de código Nunjucks, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

Ejemplo: "Con la última miga de pan como página actual sin href", de código HTML, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 -->
          

Ejemplo: "Con la última miga de pan como página actual sin href", de código Nunjucks, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}

{{ componentBreadcrumbs({
  "items": [
    {
      "text": "Inicio",
      "href": "/"
    },
    {
      "text": "Trámites por tema",
      "href": "/tramites/tema"
    },
    {
      "text": "Vivienda"
    }
  ]
}) }}

Ejemplo: "Con colapsar en móvil", de código HTML, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 -->
          

Ejemplo: "Con colapsar en móvil", de código Nunjucks, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

Ejemplo: "Con inline en móvil", de código HTML, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 -->
          

Ejemplo: "Con inline en móvil", de código Nunjucks, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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": "/"
    }
  ]
}) }}

Ejemplo: "Con inline en desktop", de código HTML, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 -->
          

Ejemplo: "Con inline en desktop", de código Nunjucks, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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": "/"
    }
  ]
}) }}

Ejemplo: "Con inline en mobile y en desktop", de código HTML, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 -->
          

Ejemplo: "Con inline en mobile y en desktop", de código Nunjucks, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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": "/"
    }
  ]
}) }}

Ejemplo: "Con botón atrás", de código HTML, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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">&larr;</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 -->
          

Ejemplo: "Con botón atrás", de código Nunjucks, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

Ejemplo: "Con botón atrás y colapsar en móvil", de código HTML, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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">&larr;</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 -->
          

Ejemplo: "Con botón atrás y colapsar en móvil", de código Nunjucks, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

Ejemplo: "Con botón atrás y la clase modificadora para truncar texto", de código HTML, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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">&larr;</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 -->
          

Ejemplo: "Con botón atrás y la clase modificadora para truncar texto", de código Nunjucks, para maquetar el componente: "Breadcrumbs", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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": "#"
    }
  ]
}) }}