-
Notifications
You must be signed in to change notification settings - Fork 8
/
breadcrumbs.html
56 lines (50 loc) · 2.09 KB
/
breadcrumbs.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
46
47
48
49
50
51
52
53
54
55
56
{% if gatePage === true %}
{% assign gatePageClassName = 'va-nav-breadcrumbs--gate' %}
{% endif %}
<nav aria-label="Breadcrumb" aria-live="polite" class="va-nav-breadcrumbs {{gatePageClassName}} {% if newGrid %}new-grid{% endif %}" id="va-breadcrumbs">
<ul class="row va-nav-breadcrumbs-list columns" id="va-breadcrumbs-list">
<li>
<a href="/" onClick="recordEvent({ event: 'nav-breadcrumb', 'nav-breadcrumb-section': 'home' });">
Home
</a>
</li>
{% assign crumbs = breadcrumb_path %}
{% if breadcrumbs_override %}
{% assign crumbs = breadcrumbs_override %}
{% endif %}
{% assign current_page = crumbs | last %}
{% for crumb in crumbs %}
<!-- Adding back in the last link as aria-current="page" -->
{% comment %}
Each breadcrumb item has a child object.
One of the properties of that object is `file` which loads the front matter metadata from the corresponding Markdown input file.
Below, we’ve assigned that object to a variable named 'crumb_child_meta'.
If these templates are still using tinyliquid, you can dump the properties of this object using {{ crumb | keys }}.
{% endcomment %}
{% assign crumb_child_meta = crumb.children.0.file %}
<li>
{% if current_page.name != crumb.name %}
<a href="/{{ crumb.path }}">
{% if crumb_child_meta.display_title %}
{{ crumb_child_meta.display_title }}
{% elsif crumb_child_meta.title %}
{{ crumb_child_meta.title }}
{% else %}
{{ crumb.name | replace: '-', ' ' | capitalize }}
{% endif %}
</a>
{% else %}
<a aria-current="page" href="/{{ crumb.path }}">
{% if crumb_child_meta.display_title %}
{{ crumb_child_meta.display_title }}
{% elsif crumb_child_meta.title %}
{{ crumb_child_meta.title }}
{% else %}
{{ crumb.name | replace: '-', ' ' | capitalize }}
{% endif %}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>