OT: How to create a dropdown site main menu?

support
1

Hello. I want to create a menu for the site. I need a structure like this:

|— Home ▼
|— one-level item ●
|— one-level item ●
|— dropdown▲
… … dropdown item ●
… … dropdown item ●
… … dropdown item ●
|— harcoded link ●

My content is arranged like this:
1

Front matter of dropdown-item:

+++
title = "Dropdown item 1"
[menu]
    [menu.main]
    parent = "dropdown"
    weight = 1
+++

Front-matter of one-level__item (what if it’s important?):

+++
title = "One-level_item 1"
menu = "main"
+++

My header partial template:

<header class="page-header">
  <div class="container">
    <nav class="page-header__site-navigation" role="navigation">
      <ul class="page-header__site-menu" role="menubar">
        {{ $currentPage := . }}
        {{ range .Site.Menus.main }}
        {{ if .HasChildren }}
          <li class="{{ if $currentPage.HasMenuCurrent "main" . }}page-header__site-item--current {{ end }}page-header__site-item page-header__site-item--submenu">
            <a class="page-header__link-swap" role="menuitem">
              {{ .Name }}
            </a>
          </li>
          <ul class="page-header__dropdown-list" aria-label="submenu">
            {{ range .Children }}
              <li class="{{ if $currentPage.IsMenuCurrent "main" . }}page-header__site-item--current {{ end }}page-header__site-item page-header__dropdown-item" role="none">
                <a class="page-header__site-link" href="{{ .URL }}" role="menuitem">
                  {{ .Name }}
                </a>
              </li>
          {{ end }}
          </ul>
          {{ else }}
          <li class="{{ if $currentPage.HasMenuCurrent "main" . }}page-header__site-item--current {{ end }}page-header__site-item" role="none">
            <a class="page-header__site-link" href="{{ .URL }}" role="menuitem">
              {{ .Name }}
            </a>
          </li>
          {{ end }}
        {{ end }}
        <li class="page-header__site-item" role="none">
          <a class="page-header__site-link" href="#" role="menuitem">
            Hardcoded link
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>

When I try to create menu, in result I have menu with one-level, without dropdown. What am I missing?

Important conditions:

  • the menu should be formed by front-matter from each md file, not in config.toml.
  • dropdown page, should not exist. There should not be opportunities to go by this path:
    2

I did not create this page, and I do not want it to exist. By clicking on the menu, I want to get a dropdown list, and the ability to go through the nested menu items. That’s all. Is there some way to not create a dropdown page, or to block this link?

2

I am afraid that your question is OT. This forum is only for Hugo support and not HTML, CSS, JS etc.

Please try searching Google, StackOverflow, the repo of the theme you’re using etc.

Also for future reference please have a look at:
The Requesting Help guidelines.