Possible to have sub menus?

[tlhenvironment]

Hi, I'm happy to have found this amazing theme, many thanks for that.
As I'm rather a nooby with hugo, I might have overlooked something, but I couldn't find out to to use sub menus with this theme.
I am searching for something like explained here:
https://codingnconcepts.com/hugo/nested-menu-hugo/
Hover (or click) on a menu to open a list of entries. Could someone share a view points how this could be set up using Congo?

Thanks :))

[bob3x255]

Hi!
The theme itself doesn't provide submenus in the navigation, however, it is pretty straightforward to implement. Take a look at this article where HTML and CSS are used, and use Hugo functions to range over child items. For instance, this is how part of the header that has navigation may look like with submenus (below). It iterates over menu items and if menu item has children, then it iterates over them as well, it also contains a piece that highlights (font-bold) menu item if the user is currently viewing it.

        <div class = "hidden lg:flex flex-row">
            <ul class="flex flex-row items-center">
            {{ if .Site.Menus.main }}
                
                {{ $currentPage := . }}
                {{ range .Site.Menus.main }}
                
                {{ $menu_item_url := .URL | absLangURL }}
                {{ $page_url:= $currentPage.Permalink | absLangURL }}
                {{ $active := eq $menu_item_url $page_url}}

                {{/*  FLYOUT MENU  */}}
                {{ if .HasChildren}}
                <div class="mr-7">
                    <div class="group relative">
                        <button class="gap-1" href="#" title="{{ .Title }}">
                            {{ .Name }}
                            {{ partial "icon.html" "chevron-down"}}
                        </button>                        
                        <div tabindex="0" class="mt-4 overflow-hidden z-10 py-6 border rounded-3xl bg-white invisible absolute left-0 top-full transition-all opacity-0 group-focus-within:visible group-focus-within:opacity-100 group-focus-within:translate-y-1">
                            <ul class="flex flex-col min-w-[12rem]">
                                {{ range .Children }}

                                {{ $drop_menu_item_url := .URL | absLangURL }}
                                {{ $active := eq $drop_menu_item_url $page_url}}

                                <li class = "px-6 py-3 {{if $active}}font-bold{{end}} hover:bg-backgroundGreen ">
                                    <a href="{{ .URL }}">
                                        {{ .Name }}
                                    </a>
                                </li>
                                {{ end }}
                            </ul>
                        </div>
                    </div>
                </div>

[practicalwellbeing]

I'm trying to get drop-downs to work, but I'm having some difficulty.
` {{ else if .HasChildren }}

            {{ $menu_item_url := .URL | absLangURL }}
            {{ $page_url := $currentPage.Permalink | absLangURL }}
            {{ $active := eq $menu_item_url $page_url}}
    
              <div class="mr-7">
                <div class="group relative">
                  <button class="gap-1" href="#" title="{{ .Title }}">
                    {{ .Name }}
                    {{ partial "icon.html" "chevron-down"}}
                  </button>
                  <div tabindex="0" class="mt-4 overflow-hidden z-10 py-6 border rounded-3xl bg-white invisible absolute left-0 top-full transition-all opacity-0 group-focus-within:visible group-focus-within:opacity-100 group-focus-within:translate-y-1">
                      <ul class="flex flex-col min-w-[24rem]">
                      {{ range .Children }}
                          {{ $drop_menu_item_url := .URL | absLangURL }}
                          {{ $active := eq $drop_menu_item_url $page_url}}
                          <li class = "text-base px-6 py-3 {{if $active}}font-bold{{end}} hover:bg-backgroundGreen">
                            <a href="{{ .URL }}">  {{ .Name }} </a>
                          </li>
                      {{ end }} <!-- range -->
                      </ul>
                  </div>  <!-- tabindex -->
              </div> <!-- mr-7 -->
          </li>
          {{ else }}
            <a href="{{ .URL }}" title="{{ .Title }}" {{ with .Params.target }}target="{{ . }}" {{ end }}>{{ with
              .Params.icon }}
            <span class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600">
              {{- partial "icon.html" . -}}
            </span>
            {{- end -}}{{- if .Params.showName | default true -}} <!-- X -->
            <span
              class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">{{
              .Name | markdownify | emojify }}</span>
            {{ end }}</a>  <!-- X -->
          {{ end }} <!-- D -->

`
This produces a menu with an item with sub-menu items correctly marked, but the pressing the button doesn't do anything. If I inspect the code in the browser it shows me that the list of sub-menu items have been created, I just can't get at them.
I'm fairly new to hugo and very new to tailwind, if you can spot any ... ahem ... deliberate mistakes, or suggest some other approach, I'd be very grateful.
Cheers.

[tlhenvironment]

Hi Bob, thanks a lot for your answer and effort. I'm really new to this, so I'm not sure where to start.
Am I correct that it's basically all about this file (using the basic menu type)?
https://github.com/jpanther/congo/blob/dev/layouts/partials/header/basic.html

Assuming I haven't changed this file before, I tried to add some of your new code after Line 12, which stoped hugo from working. Am I on the right track 👍 ?

Edit:
Alternatively, is anyone aware of a repo for a site which implements this?

[wolfspyre]

I've got something kluged together... I wouldn't say I'm PROUD of it yet... but....

Preview: https://wolfspyrelabs.static.wolfspyre.io/hugo-kisso/wplshortcodes/

code: https://gitlab.wolfspyre.io/wolfspyrelabs/hugo-kisso/wplshortcodes

this is basically a superset of my bolt-ons plus congo underneath.

https://gitlab.wolfspyre.io/wolfspyrelabs/hugo-kisso/wplshortcodes/-/tree/wpl_main/layouts/partials/header?ref_type=heads

I ended up with 3 files to make my dropdowns ...

• partials/header/grace.html
• partials/header/rocky.html
• layouts/partials/inline/menu/walk.html

along with a bunch of custom "enhancements"

I'll be the first to admit it's ugly as hell... and prolly isn't something you'd want to just... TAKE and USE.... it's still kinda fucky... my goal is to get it WORKING so I can work on other stuff, and circle back to clean this up later.

¯\_(ツ)_/¯

caveat emptor