<nav class="o-container o-container--large c-breadcrumb" aria-label="Fil d'Ariane">
<h2 class="u-visually-hidden">Fil d'Arianie</h2>
<ul class="c-breadcrumb__list" itemscope itemtype="https://schema.org/BreadcrumbList">
<li class="c-breadcrumb__list-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a class="c-breadcrumb__link" href="#nowehre" itemprop="item"><span class="c-breadcrumb__link-text" itemprop="name">Rapport annuel de gestion 2019</span></a>
<meta itemprop="position" content="1" />
</li>
<li class="c-breadcrumb__list-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a class="c-breadcrumb__link" href="#nowehre" itemprop="item"><span class="c-breadcrumb__link-text" itemprop="name">Département du territoire et de l'environnement (DTE)</span></a>
<meta itemprop="position" content="2" />
</li>
<li class="c-breadcrumb__list-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a class="c-breadcrumb__link" href="#nowehre" itemprop="item"><span class="c-breadcrumb__link-text" itemprop="name">Service des automobiles et de la navigation (SAN)</span></a>
<meta itemprop="position" content="3" />
</li>
<li class="c-breadcrumb__list-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a class="c-breadcrumb__link" href="#nowehre" aria-current="true" itemprop="item"><span class="c-breadcrumb__link-text" itemprop="name">Projets particuliers et réalisation des objectifs 198 du SAN</span></a>
<meta itemprop="position" content="4" />
</li>
</ul>
</nav>
<nav class="o-container o-container--large c-breadcrumb" aria-label="Fil d'Ariane">
<h2 class="u-visually-hidden">Fil d'Arianie</h2>
<ul
class="c-breadcrumb__list"
itemscope
itemtype="https://schema.org/BreadcrumbList"
>
{% for item in items %}
<li
class="c-breadcrumb__list-item"
itemprop="itemListElement"
itemscope
itemtype="https://schema.org/ListItem"
>
<a
class="c-breadcrumb__link"
href="{{ item.href }}"
{% if loop.last %}
aria-current="true"
{% endif %}
itemprop="item"
><span class="c-breadcrumb__link-text" itemprop="name"
>{{ item.name }}</span
></a
>
<meta itemprop="position" content="{{ loop.index }}" />
</li>
{% endfor %}
</ul>
</nav>
{
"items": [
{
"name": "Rapport annuel de gestion 2019",
"href": "#nowehre"
},
{
"name": "Département du territoire et de l'environnement (DTE)",
"href": "#nowehre"
},
{
"name": "Service des automobiles et de la navigation (SAN)",
"href": "#nowehre"
},
{
"name": "Projets particuliers et réalisation des objectifs 198 du SAN",
"href": "#nowehre"
}
]
}
/* ==========================================================================
# _components.breadcrumb.css
========================================================================== */
.c-breadcrumb {
--stack-space: 1.4375rem;
@extend .u-print-hidden;
}
.c-breadcrumb__list {
@apply
flex
flex-row
flex-wrap
;
}
/* -------------------------------------
# List-item
------------------------------------- */
.c-breadcrumb__list-item {
@apply
flex
mb-2
;
}
.c-breadcrumb__list-item:not(:last-child) {
@apply
mr-4
;
}
/* -------------------------------------
# Link
------------------------------------- */
/***
* 1. When there is hidden list items on the same horizontal lines, nothing is
* setting the min-height. So the items are a few pixel height. This is here
to avoid this problem.
*/
.c-breadcrumb__link {
@apply
inline-block
bg-gray-200
rounded
py-1
px-4
transition
text-sm
;
min-height: 2.1875rem;
}
.c-breadcrumb__link:hover,
.c-breadcrumb__link:active {
@apply
bg-primary
text-white
;
}
.c-breadcrumb__link:focus {
@apply
bg-primary
text-white
outline-focus
;
}
/* -----------------------------------
# Link-text
----------------------------------- */
/***
* Hide all items except last two
*
* 1. Do not hide when printing the breadcrumb
* 2. Hide all items except the two last ones
*/
@media screen { /* [1] */
.c-breadcrumb__list-item:not(:nth-last-child(-n+2)) .c-breadcrumb__link-text {
@apply
sr-only
w-4 /* [2] */
;
}
.c-breadcrumb__list-item:not(:nth-last-child(-n+2)) .c-breadcrumb__link:hover .c-breadcrumb__link-text,
.c-breadcrumb__list-item:not(:nth-last-child(-n+2)) .c-breadcrumb__link:active .c-breadcrumb__link-text,
.c-breadcrumb__list-item:not(:nth-last-child(-n+2)) .c-breadcrumb__link:focus .c-breadcrumb__link-text {
@apply
not-sr-only
;
}
}
No notes defined.