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: 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({
  "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 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 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ódigo

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

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

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",
      "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 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 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 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 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 -->

Item a mitad sin href #

Mostrar código

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 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 mb-sm py-xs text-neutral-dark ">
      <span class="no-underline truncate">
        Section
      </span>
    </li>
    <li class="flex items-baseline 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 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ódigo

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

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 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 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 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-max-content-3 w-full items-baseline text-sm">
    <li class="flex items-baseline 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 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 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 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-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 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 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 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-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 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 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 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 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ó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",
      "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">&larr;</span></a>
    </li>
    <li class="flex items-baseline 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 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 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 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 -->