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"
}
]
}) }}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ódigodel ejemplo: Con 1 sólo nivel
Contenido
Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
"items": [
{
"text": "Sección",
"href": "/section"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-1 w-full items-baseline text-sm">
<li class="flex items-baseline mb-sm py-xs text-neutral-dark hover:text-black flex-1 font-semibold">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/section" aria-current="page">
<strong>Sección</strong>
</a>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->
Con múltiples niveles #
Mostrar códigodel ejemplo: Con múltiples niveles
Contenido
Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
"items": [
{
"text": "Inicio",
"href": "/"
},
{
"text": "Sección",
"href": "/section"
},
{
"text": "Sub-sección",
"href": "/section/sub-section"
},
{
"text": "Sub Sub-sección",
"href": "/section/sub-section/sub-sub-section"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-4 w-full items-baseline text-sm">
<li class="flex items-baseline 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ódigodel ejemplo: Con cadenas muy largas
Contenido
Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
"items": [
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
"href": "/"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
"href": "/"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
"href": "/"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
"href": "/"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-4 w-full items-baseline text-sm">
<li class="flex items-baseline 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ódigodel ejemplo: Item a mitad sin href
Contenido
Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
"items": [
{
"text": "Inicio",
"href": "/"
},
{
"text": "Section"
},
{
"text": "Sub-sección",
"href": "/section/sub-section"
},
{
"text": "Sub Sub-sección",
"href": "/section/sub-section/sub-sub-section"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-4 w-full items-baseline text-sm">
<li class="flex items-baseline 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ódigodel ejemplo: Con la última miga de pan como página actual con href
Contenido
Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
"items": [
{
"text": "Inicio",
"href": "/"
},
{
"text": "Trámites por tema",
"href": "/tramites/tema"
},
{
"text": "Vivienda",
"href": "/tramites/tema/vivienda"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-3 w-full items-baseline text-sm">
<li class="flex items-baseline 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ódigodel ejemplo: Con la última miga de pan como página actual sin href
Contenido
Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
"items": [
{
"text": "Inicio",
"href": "/"
},
{
"text": "Trámites por tema",
"href": "/tramites/tema"
},
{
"text": "Vivienda"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-3 w-full items-baseline text-sm">
<li class="flex items-baseline 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ódigodel ejemplo: Con colapsar en móvil
Contenido
Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
"collapseOnMobile": true,
"items": [
{
"text": "Inicio",
"href": "/"
},
{
"text": "Trámites por tema",
"href": "/tramites/tema"
},
{
"text": "Vivienda",
"href": "/tramites/tema/vivienda"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs c-breadcrumbs--collapse-on-mobile" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-3 w-full items-baseline text-sm">
<li class="flex items-baseline 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 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/"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs c-breadcrumbs--inline-on-mobile" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-6 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/">
Trámites
</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/actividades-industriales-y-energia/">
Actividades industriales y energía
</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/actividades-industriales/">
Actividades industriales
</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/actividades-industriales/comunicaciones-de-servicios/" aria-current="page">
<strong>Comunicaciones de servicios</strong>
</a>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->
Con botón atrás #
Mostrar códigodel ejemplo: Con botón atrás
Contenido
Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
"hasBackButton": true,
"items": [
{
"text": "Inicio",
"href": "/"
},
{
"text": "Trámites por tema",
"href": "/tramites/tema"
},
{
"text": "Vivienda"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-4 w-full items-baseline text-sm">
<li class="c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base">
<a href="javascript:history.back()" class="px-sm border-r border-neutral-base focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"><span class="sr-only">Volver a la página anterior</span><span aria-hidden="true" title="Volver a la página anterior">←</span></a>
</li>
<li class="flex items-baseline 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ódigodel ejemplo: Con botón atrás y colapsar en móvil
Contenido
Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
"collapseOnMobile": true,
"hasBackButton": true,
"items": [
{
"text": "Inicio",
"href": "/"
},
{
"text": "Trámites por tema",
"href": "/tramites/tema"
},
{
"text": "Vivienda",
"href": "/tramites/tema/vivienda"
},
{
"text": "Urbanismo",
"href": "/tramites/tema/vivienda/urbanismo"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs c-breadcrumbs--collapse-on-mobile" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-5 w-full items-baseline text-sm">
<li class="c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base">
<a href="javascript:history.back()" class="px-sm border-r border-neutral-base focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"><span class="sr-only">Volver a la página anterior</span><span aria-hidden="true" title="Volver a la página anterior">←</span></a>
</li>
<li class="flex items-baseline 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ódigodel ejemplo: Con botón atrás y la clase modificadora para truncar texto
Contenido
Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
"hasBackButton": true,
"classes": "c-breadcrumbs--truncated",
"items": [
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
"href": "#"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
"href": "#"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
"href": "#"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
"href": "#"
}
]
}) }}HTML
<!-- breadcrumbs -->
<nav class="c-breadcrumbs c-breadcrumbs--truncated" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-5 w-full items-baseline text-sm">
<li class="c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base">
<a href="javascript:history.back()" class="px-sm border-r border-neutral-base focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"><span class="sr-only">Volver a la página anterior</span><span aria-hidden="true" title="Volver a la página anterior">←</span></a>
</li>
<li class="flex items-baseline 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 -->