Breadcrumbs

Mostrar parámetros

Parámetros del componente

              params:
- name: items
  type: array
  required: true
  description: Array of breadcrumbs item objects.
  params:
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored.
  - name: href
    type: string
    required: false
    description: Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item.
  - name: attributes
    type: object
    description: HTML attributes (for example data attributes) to add to the individual crumb.
- name: classes
  type: string
  required: false
  description: Classes to add to the breadcrumbs container.
- name: collapseOnMobile
  type: boolean
  required: false
  description: When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below.
- name: inlineOnMobile
  type: boolean
  required: false
  description: When true, the breadcrumbs will linebreak if there is needed only on tablet breakpoint and below.
- name: hasBackButton
  type: boolean
  required: false
  description: When true, the breadcrumbs will start with a back button link.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the breadcrumbs container.
              
            

Por defecto

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

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

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

Con 1 sólo nivel

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

Contenido

Nunjucks macro

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

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

Con múltiples niveles

Mostrar códigodel ejemplo: Con múltiples niveles

Contenido

Nunjucks macro

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

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

Con cadenas muy largas

Mostrar códigodel ejemplo: Con cadenas muy largas

Contenido

Nunjucks macro

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

{{ componentBreadcrumbs({
  "items": [
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
      "href": "/"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
      "href": "/"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
      "href": "/"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
      "href": "/"
    }
  ]
}) }}

Item a mitad sin href

Mostrar códigodel ejemplo: Item a mitad sin href

Contenido

Nunjucks macro

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

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

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

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

Contenido

Nunjucks macro

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

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

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

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

Contenido

Nunjucks macro

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

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

Con colapsar en móvil

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

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

Contenido

Nunjucks macro

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

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

Con inline en móvil

Mirar en anchuras pequeñas para ver cómo se genera un salto de línea si el texto no cabe.

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

Contenido

Nunjucks macro

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

{{ componentBreadcrumbs({
  "inlineOnMobile": true,
  "items": [
    {
      "text": "Inicio",
      "href": "/"
    },
    {
      "text": "Trámites",
      "href": "/tramites/"
    },
    {
      "text": "Trámites por tema",
      "href": "/tramites/tema/"
    },
    {
      "text": "Actividades industriales y energía",
      "href": "/tramites/tema/actividades-industriales-y-energia/"
    },
    {
      "text": "Actividades industriales",
      "href": "/tramites/tema/actividades-industriales/"
    },
    {
      "text": "Comunicaciones de servicios",
      "href": "/tramites/tema/actividades-industriales/comunicaciones-de-servicios/"
    }
  ]
}) }}

Con botón atrás

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

Contenido

Nunjucks macro

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

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

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

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

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

Contenido

Nunjucks macro

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

{{ componentBreadcrumbs({
  "collapseOnMobile": true,
  "hasBackButton": true,
  "items": [
    {
      "text": "Inicio",
      "href": "/"
    },
    {
      "text": "Trámites por tema",
      "href": "/tramites/tema"
    },
    {
      "text": "Vivienda",
      "href": "/tramites/tema/vivienda"
    },
    {
      "text": "Urbanismo",
      "href": "/tramites/tema/vivienda/urbanismo"
    }
  ]
}) }}

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

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

Contenido

Nunjucks macro

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

{{ componentBreadcrumbs({
  "hasBackButton": true,
  "classes": "c-breadcrumbs--truncated",
  "items": [
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
      "href": "#"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
      "href": "#"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
      "href": "#"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
      "href": "#"
    }
  ]
}) }}