1<#assign
2 groupFriendlyURL=themeDisplay.getScopeGroup().getFriendlyURL()
3 groupPathFriendlyURLPublic=themeDisplay.getPathFriendlyURLPublic() + groupFriendlyURL
4 navigationJSONObject=jsonFactoryUtil.createJSONObject(htmlUtil.unescape(navigation.getData()?trim))
5 breadcrumbJSONArray=navigationJSONObject.getJSONArray("breadcrumb")
6 childrenJSONArray=navigationJSONObject.getJSONArray("children")
7 parentJSONObject=navigationJSONObject.getJSONObject("parent")
8 productJSONObject=breadcrumbJSONArray.getJSONObject(breadcrumbJSONArray.length()-1)!navigationJSONObject.getJSONObject("self")
9 siblingsJSONArray=navigationJSONObject.getJSONArray("siblings")
10 selfJSONObject=navigationJSONObject.getJSONObject("self")
11/>
12
13<div class="learn-article-nav">
14 <div class="learn-article-breadcrumbs">
15 <div class="learn-article-breadcrumbs-content">
16 <div class="align-items-baseline d-flex justify-content-between mb-3">
17 <ul
18 aria-label="breadcrumb navigation"
19 class="learn-article-breadcrumb"
20 role="navigation"
21 >
22 <#if breadcrumbJSONArray.length() gt 0>
23 <#if breadcrumbJSONArray.length() lt 3>
24 <li>
25 <a href="/"><@clay["icon"] symbol="home-full" /></a>
26 </li>
27 <#list 0..breadcrumbJSONArray.length()-1 as i>
28 <li>
29 <a href='${breadcrumbJSONArray.getJSONObject(i).getString("url")}'>
30 ${breadcrumbJSONArray.getJSONObject(i).getString("title")}
31 </a>
32 </li>
33 </#list>
34 <#else>
35 <li>
36 <a href='${breadcrumbJSONArray.getJSONObject(0).getString("url")}'>...</a>
37 </li>
38 <#assign startIndex = breadcrumbJSONArray.length() - 1>
39 <#assign stopIndex = (startIndex - 1)?max(1)>
40
41 <#list startIndex..stopIndex as i>
42 <li>
43 <a href='${breadcrumbJSONArray.getJSONObject(i).getString("url")}'>
44 ${breadcrumbJSONArray.getJSONObject(i).getString("title")}
45 </a>
46 </li>
47 </#list>
48 </#if>
49 <li>
50 <a href='${productJSONObject.getString("url")}'>
51 Item final: ${productJSONObject.getString("title")}
52 </a>
53 </li>
54 </#if>
55 <li>
56 ${navigationJSONObject.getJSONObject("self").getString("title")}
57 </li>
58 </ul>
59 </div>
60 </div>
61 </div>
62
63 <div class="learn-article-nav-content">
64 <#if parentJSONObject?has_content && parentJSONObject.getString("url")?has_content>
65 <div class="learn-article-nav-item learn-article-nav-parent p-3">
66 <div class="mr-2">
67 <a
68 href='${parentJSONObject.getString("url")}'>
69 <svg
70 class="lexicon-icon lexicon-icon-angle-left"
71 role="presentation"
72 viewBox="0 0 512 512">
73 <use xlink:href="/o/admin-theme/images/clay/icons.svg#angle-left"></use>
74 </svg>
75 </a>
76 </div>
77 <span>
78 ${parentJSONObject.getString("title")}
79 </span>
80 </div>
81 </#if>
82 <#if childrenJSONArray.length() gt 0>
83 <ul class="m-0 p-2">
84 <#list 0..childrenJSONArray.length()-1 as i>
85 <li class="learn-article-nav-item">
86 <a
87 class='liferay-nav-item ${(navigationJSONObject.getJSONObject("self").url == childrenJSONArray.getJSONObject(i).url)?then("selected", "")}'
88 href="${childrenJSONArray.getJSONObject(i).url}">
89 <span>
90 ${childrenJSONArray.getJSONObject(i).getString("title")}
91 </span>
92 </a>
93 </li>
94 </#list>
95 </ul>
96 <#elseif siblingsJSONArray.length() gt 0>
97 <ul class="m-0 p-2">
98 <#list 0..siblingsJSONArray.length()-1 as i>
99 <li class="learn-article-nav-item">
100 <a
101 class='liferay-nav-item ${(navigationJSONObject.getJSONObject("self").url == siblingsJSONArray.getJSONObject(i).url)?then("selected", "")}'
102 href="${siblingsJSONArray.getJSONObject(i).url}">
103 <span>
104 ${siblingsJSONArray.getJSONObject(i).getString("title")}
105 </span>
106 </a>
107 </li>
108 </#list>
109 </ul>
110 </#if>
111 </div>
112</div>
113<style>
114 .learn-article-breadcrumb {
115 display: flex;
116 flex-wrap: wrap;
117 gap: 2px;
118 }
119
120 .learn-article-breadcrumb li {
121 font-size: 13px;
122 color: #6C6C75;
123 font-weight: 400;
124 }
125
126 .learn-article-breadcrumb li+li::before {
127 content: "/";
128 padding: 0 8px;
129 }
130</style>