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>