summaryrefslogtreecommitdiff
path: root/layouts/partials/navmenu.html
blob: 91e53b30274b8ac8487caeee4c6f11a98e28d9aa (plain)
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
{{- /*
Simplified version of the `hugo new template` menu.html default
Renders a menu for the given menu ID.

@context {page} page: The current page.
@context {string} menuID: The menu ID.

@example: {{ partial "navmenu.html" (dict "menuID" "main" "page" .) }}
*/}}

{{- $currentPage := .page }}
{{- $menuID := .menuID }}

{{- with index site.Menus $menuID }}
<nav role="navigation" aria-label="{{ lang.Translate "header.navmenu" | default "Site navigation" }}" class="header__navigation">
    <ul class="header__navigation-list">
        {{- range . }}
            {{- $isCurrentPage := $currentPage.IsMenuCurrent .Menu . }}
            {{- $isAncestorPage := $currentPage.HasMenuCurrent .Menu . }}
            {{- $isActive := or $isCurrentPage $isAncestorPage }}
            {{- $menuItemName := .Name }}

            {{- $attrs := dict "href" .URL }}
            {{- if $currentPage.IsMenuCurrent .Menu . }}
                {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
            {{- else if $currentPage.HasMenuCurrent .Menu .}}
                {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
            {{- end }}

            <!-- Translations -->
            {{- with .Identifier }}
                {{- with lang.Translate . }}
                    {{- $menuItemName = . }}
                {{- end }}
            {{- end }}

            <li class="header__navigation--list-item">
                <a
                    href="{{ .URL }}"
                    class="header__navigation-link{{ if $isActive }} header__navigation-link--active{{ end }}"
                    aria-current="{{ if $isCurrentPage }}page{{ else if $isAncestorPage }}true{{ end }}"
                >
                    {{ $menuItemName }}
                </a>
            </li>
        {{- end }}
    </ul>
</nav>
{{- end -}}