Menu

Updated: September 28, 2024

Hugo menu structures.


Table of Contents

MAIN MENUS

<nav class="menu-main">
    {{ $currentPage := . }}
    {{ range .Site.Menus.main }}
    <a class="nav-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
    {{ end }}
</nav>
<!-- Groups content according to content section. The ".Key" in this instance will be the section's title.--->
{{ range .Pages.GroupBy "Section" }}
<h3>{{ .Key }}</h3>
<ul>
            {{ range .Pages.ByTitle }}
    <li>
    <a href="{{ .Permalink }}">{{ .Title }}</a>
    </li>
    {{ end }}
</ul>
{{ end }}
<nav class="navbar navbar-expand-lg navbar-light ">
  <a class="navbar-brand" href="{{ "/" | relURL}}">{{.Site.Title}}</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      {{ $currentPage := . }}
      {{ range .Site.Menus.main }}
        {{ if not (eq .Identifier "tags") }}
          <li class="navbar-item {{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}">
            <a class="nav-link" href="{{ .URL | relURL }}" title="{{ .Title }}">{{ .Name }}</a>
          </li>
        {{ else }}
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="{{ .URL | relURL }}" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              {{ .Name }}
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              {{ range $name, $taxonomy := $currentPage.Site.Taxonomies.tags }}
                {{ with $.Site.GetPage (printf "/tags/%s" $name) }}
                  <a class="dropdown-item" href="{{ .URL | relURL }}">{{ $name }}</a>
                {{ end }}
              {{ end }}
            </div>
          </li>
        {{ end }}
      {{ end }}
    </ul>
  </div>
</nav>
<nav class="menu-sidebar">
    <h2>D3C3P7</h2>
    <div>
      <input type="checkbox" id="menu">
      <label for="menu">Bash</label>
      <div class="menu-content">
        <ol>
          {{ range (where .Site.Pages.ByTitle "Section" "bash") }}
          <li>
            <a href="{{ .Permalink }}">{{ lower .Title }}</a>
          </li>
          {{ end }}
        </ol>
      </div>
    </div>
    <div>
      <input type="checkbox" id="menu">
      <label for="menu">Mac</label>
      <div class="menu-content0">
        <ol>
          {{ range (where .Site.Pages.ByTitle "Section" "mac") }}
            <li>
              <a href="{{ .Permalink }}">{{ .Title }}</a>
            </li>
          {{ end }}
        </ol>
      </div>
    </div>
</nav>