-
Notifications
You must be signed in to change notification settings - Fork 732
/
breadcrumb.html
45 lines (45 loc) · 2.27 KB
/
breadcrumb.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ Copyright 2021 Adobe
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
<nav data-sly-use.breadcrumb="com.adobe.cq.wcm.core.components.models.Breadcrumb"
data-sly-use.template="core/wcm/components/commons/v1/templates.html"
id="${breadcrumb.id}"
class="cmp-breadcrumb"
aria-label="${'Breadcrumb' @ i18n}"
data-sly-test="${breadcrumb.items.size > 0}"
data-cmp-data-layer="${breadcrumb.data.json}"
role="navigation">
<ol class="cmp-breadcrumb__list"
itemscope itemtype="http://schema.org/BreadcrumbList"
data-sly-list.navItem="${breadcrumb.items}">
<sly data-sly-set.lang="${navItem.page.properties.contentLang}"/>
<li class="cmp-breadcrumb__item${navItem.active ? ' cmp-breadcrumb__item--active' : ''}"
aria-current="${navItem.active ? 'page' : false}"
data-cmp-data-layer="${navItem.data.json}"
itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a data-sly-attribute="${navItem.link.htmlAttributes}"
class="cmp-breadcrumb__item-link"
itemprop="item"
lang="${lang}"
hreflang="${lang}"
data-cmp-clickable="${breadcrumb.data ? true : false}"
data-sly-unwrap="${navItem.active || !navItem.link.valid}">
<span itemprop="name">${navItem.title}</span>
</a>
<meta itemprop="position" content="${navItemList.count}" />
</li>
</ol>
</nav>
<sly data-sly-call="${template.placeholder @ isEmpty=breadcrumb.items.size == 0, classAppend='cmp-breadcrumb'}"></sly>