hugo-theme-fha/layouts/partials/nav.html

<nav class="navbar sticky-top navbar-expand-lg mt-auto py-2">
    <div class="container-xxl">
        <a class="navbar-brand"  href="/">{{ .Site.Title}}</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03"
          aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            {{- $currentNode := . -}}
            {{- range .Site.Menus.nav -}}
            {{- if .Name -}}
            {{- if .HasChildren -}}
            <li class="nav_item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-bs-toggle="dropdown" aria-expanded="false">{{ .Name }}</a>
                <ul class="dropdown-menu" aria-labelledby="dropdown08">
                    {{ range .Children }}
                    <li><a class="dropdown-item {{ if or ($currentNode.IsMenuCurrent "nav" .) ($currentNode.HasMenuCurrent "nav" .)}} active{{ end }}" aria-current="page" href="{{ .URL }}" {{ if ( and ( strings.HasPrefix .URL "http") ( strings.Contains .URL "globe")) }} target="_blank" rel="noopener noreferrer" {{ end }}>{{ .Name }}</a></li>
                {{- end -}}
                </ul>
            </li>
            {{- else -}}
            <li class="nav-item">
              <a class="nav-link {{ if or ($currentNode.IsMenuCurrent "nav" .) ($currentNode.HasMenuCurrent "nav" .)}} active{{ end }}" aria-current="page" href="{{ .URL }}">{{ .Name }}</a>
            </li>
            {{- end -}}
            {{- end -}}
            {{- end -}}
          </ul>
        </div>

        {{- if eq .Site.Params.enablesearch true -}}
        <!-- Search Addition-->
    <div class="bd-search" id="docsearch" data-bd-docs-version="5.2" style="margin-left: auto;">
        <form class="d-flex" role="search">
          <input id="search" class="form-control me-2" type="text" placeholder="press '/' to search"
            aria-label="Search" >
          <button id="searchBtn" class="btn btn-outline-secondary" type="button" data-bs-toggle="modal"
            style="margin-left: 1em;" data-bs-target="#searchModal">Search</button>
          <div class="form-check d-none">
            <input class="form-check-input" type="checkbox" value="" id="enable_search" checked>
            <label class="form-check-label" for="enable_search">Search</label>
          </div>
          <div class="form-check d-none">
            <input class="form-check-input" type="checkbox" value="" id="regex_mode" >
            <label class="form-check-label" for="regex_mode">Regex</label>
          </div>
        </form>
      </div>
    </div>
        {{- end -}}

        {{ partial "navcolormode.html" . }}
    </nav>
    {{- if eq .Site.Params.enablebreadcrump true -}}
    <nav class="navbar navbar-expand-lg sticky-top px-3 py-1 d-flex flex-row mt-0">
        <ol class="breadcrumb m-0 text-secondary">
          {{- range .Ancestors.Reverse }}
          <li class="breadcrumb-item"><a class="text-decoration-none text-secondary" href="{{ .RelPermalink }}">{{ .Title }}</a> >> </li>
          <span class="" aria-hidden="true"> </span>
            {{- end }}
            <li class="breadcrumb-item active "><a  class="text-decoration-none text-secondary" href="{{ .RelPermalink }}">{{ .Title }}</a></li>   
        </ol>
    </nav>
    {{- end -}}

{{- if eq .Site.Params.enablesearch true -}}
<!-- Modal -->
<div class="modal fade" id="searchModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
  aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Search Result</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p id="count">
          results :
        </p>
        <ul id="listOfUrl" class="list-group" />
      </div>
      <div class="modal-footer">
        <button id="hideBtn" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{{- end -}}