daniel/hugo_bootstrap_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support one level of dropdown menus in the navbar

Browse Source 
A `main` menu entry with child entries (others with `parent:` set) is
now rendered as a Bootstrap dropdown; flat entries are unchanged.
Active-state highlighting is trailing-slash tolerant and marks the
dropdown parent active when one of its children is the current page.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
daniel
2026-09-02 17:26:39 +02:00
co-authored by Claude Sonnet 5
parent ec9cba0555
commit 071ee344a3
2 changed files with 56 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/_partials/header.html
+25 -20
View File
@@ -5,44 +5,49 @@
{{- if os.FileExists "static/img/logo.svg" -}}{{- $logo = "img/logo.svg" -}}{{- end -}}
<img src="{{ $logo | relURL }}" alt="{{ .Site.Title }}" title="{{ .Site.Title }}">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
{{ range .Site.Menus.main }}
{{ if .HasChildren }}
<!-- Dropdown menu for items with children -->
{{- /* Current page, without a trailing slash, for menu-item highlighting. */ -}}
{{- $current := strings.TrimSuffix "/" .RelPermalink -}}
{{- range .Site.Menus.main -}}
{{- $isActive := and .URL (eq (strings.TrimSuffix "/" .URL) $current) -}}
{{- if .HasChildren -}}
{{- /* A menu entry with sub-entries (set `parent:` on them) becomes a dropdown. */ -}}
{{- range .Children -}}
{{- if and .URL (eq (strings.TrimSuffix "/" .URL) $current) }}{{ $isActive = true }}{{ end -}}
{{- end -}}
{{- $id := printf "navbar-%s" (.Identifier | default (.Name | urlize)) -}}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbar{{ .Name | urlize }}"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
<a class="nav-link dropdown-toggle{{ if $isActive }} active{{ end }}" href="#"
id="{{ $id }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{{ .Name }}
</a>
<ul class="dropdown-menu" aria-labelledby="navbar{{ .Name | urlize }}">
{{ range .Children }}
<ul class="dropdown-menu" aria-labelledby="{{ $id }}">
{{- range .Children }}
<li>
<a class="dropdown-item {{ if eq .URL ($.RelPermalink) }}active{{ end }}"
href="{{ .URL | relURL }}">
<a class="dropdown-item{{ if and .URL (eq (strings.TrimSuffix "/" .URL) $current) }} active{{ end }}"
href="{{ .URL }}">
{{ .Name }}
</a>
</li>
{{ end }}
{{- end }}
</ul>
</li>
{{ else }}
<!-- Regular menu item -->
{{- else -}}
<li class="nav-item">
<a class="nav-link {{ if eq .URL ($.RelPermalink) }}active{{ end }}"
href="{{ .URL | relURL }}">
<a class="nav-link{{ if $isActive }} active{{ end }}" href="{{ .URL }}">
{{ .Name }}
</a>
</li>
{{ end }}
{{ end }}
{{- end -}}
{{- end }}
</ul>
</div>
</div>