Fil d'ariane
Le composant breadcrumbs se compose d'une liste de liens de navigation et de la page courante.
Classes du composant
Modificateurs de tailles
.breadcrumbs--sm: Small.breadcrumbs--md: Medium.breadcrumbs--lg: Large.breadcrumbs--xl: Extra-large
Exemples
<kuik:breadcrumbs size="sm" breadcrumbs="${breadcrumbsObject}" />
breadcrumbsObject étant du type fr.kosmos.web.kore.attributes.Breadcrumbs
Size
sm
md
lg
xl
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--@elvariable id="breadcrumbsViewModel" type="fr.kosmos.web.kore.attributes.DefaultBreadcrumbs"--%>
<kuik:heading size="lg" skin="a" title="Size" level="3" />
<kuik:heading size="lg" title="sm" level="4" />
<kuik:breadcrumbs size="sm" breadcrumbs="${breadcrumbsViewModel}" />
<kuik:heading size="lg" title="md" level="4" />
<kuik:breadcrumbs size="md" breadcrumbs="${breadcrumbsViewModel}" />
<kuik:heading size="lg" title="lg" level="4" />
<kuik:breadcrumbs size="lg" breadcrumbs="${breadcrumbsViewModel}" />
<kuik:heading size="lg" title="xl" level="4" />
<kuik:breadcrumbs size="xl" breadcrumbs="${breadcrumbsViewModel}" />
| Name | Type | Required | Description |
|---|---|---|---|
| breadcrumbs | fr.kosmos.web.kore.attributes.interfaces.Breadcrumbs | true | |
| size | java.lang.String | false | Taille (défaut : sm) |
$prefix: 'breadcrumbs';
$prefix-link: 'breadcrumbs-link';
$prefix-current: 'breadcrumbs-current';
.breadcrumbs {
@include custom-space($prefix, true);
@include custom-border($prefix, true);
@include custom-color($prefix, true);
@include custom-typo($prefix, true);
--separator: var(--neutral-30);
}
.breadcrumbs--sm, .breadcrumbs--md, .breadcrumbs--lg, .breadcrumbs--xl {
@include custom-space($prefix);
@include custom-border($prefix);
@include custom-typo($prefix);
}
.breadcrumbs__list {
display: inline-flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumbs__item::after {
color: var(--separator);
content: '/';
display: inline-block;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.breadcrumbs__item:last-of-type::after {
content: none;
}
.breadcrumbs__link {
@include custom-typo($prefix-link, true);
@include custom-color($prefix-link, true);
}
.breadcrumbs__item--current {
@include custom-typo($prefix-current, true);
@include custom-color($prefix-current, true);
}
<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ attribute name="breadcrumbs" required="true" type="fr.kosmos.web.kore.attributes.interfaces.Breadcrumbs" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>
<c:if test="${not empty pageScope.breadcrumbs}">
<c:if test="${empty pageScope.size}">
<c:set var="size" value="sm"/>
</c:if>
<c:set var="classesSize" value="breadcrumbs--${pageScope.size}"/>
<c:set var="classes" value="breadcrumbs ${pageScope.classesSize}"/>
<nav class="${pageScope.classes}" aria-label="fil d'ariane">
<ul class="breadcrumbs__list">
<c:forEach items="${pageScope.breadcrumbs.urls}" var="url">
<li class="breadcrumbs__item">
<c:choose>
<c:when test="${not empty url.url}">
<a class="breadcrumbs__link" href="${url.url}"><c:out value="${url.title}"/></a>
</c:when>
<c:otherwise>
<c:out value="${url.title}"/>
</c:otherwise>
</c:choose>
</li>
</c:forEach>
<li class="breadcrumbs__item breadcrumbs__item--current" aria-current="page">
<c:out value="${pageScope.breadcrumbs.title}"/>
</li>
</ul>
</nav>
</c:if>