Drop-down menu only by set config.toml

support
1

I have a multilingual website, and I set in my config.toml the following lines:

[languages]
  [languages.en]
    title = "NicFab"
    languageName = "English"
    weight = 1
  [languages.it]
    title = "Il microblog NicFab"
    languageName = "Italian"
    weight = 2

    [[languages.en.menu.main]]
    name = "Home"
    pageref = "/"
    weight = 1
    [[languages.en.menu.main]]
    name = "About me"
    pageref = "/about"
    weight = 2
    [[languages.en.menu.main]]
    name = "Blog"
    url = "https://www.nicfab.it"
    weight = 3
    [[languages.en.menu.main]]
    name = "Privacy"
    pageref = "/privacypolicy"
    weight = 4
    [[languages.en.menu.main]]
    name = "Contacts"
    pageref = "/contact"
    weight = 5
    [[languages.en.menu.main]]
    name = "Archive"
    pageref = "archives"
    weight = 6
    [[languages.en.menu.main]]
    name = "Search"
    pageref = "/search"
    weight = 7
      

    [[languages.it.menu.main]]
    name = "Home"
    pageref = "/"
    weight = 1
    [[languages.it.menu.main]]
    name = "Chi sono"
    pageref = "/about.it"
    weight = 2
    [[languages.it.menu.main]]
    name = "Blog"
    url = "https://www.nicfab.it"
    weight = 3
    [[languages.it.menu.main]]
    name = "Privacy"
    pageref = "/privacypolicy.it"
    weight = 4
    [[languages.it.menu.main]]
    name = "Contatti"
    pageref = "/contact.it"
    weight = 5
    [[languages.it.menu.main]]
    name = "Archive"
    pageref = "archives.it"
    weight = 6
    [[languages.it.menu.main]]
    name = "Cerca"
    pageref = "/search.it"
    weight = 7

I have all the pages files under /content, distinguishing the Italian ones as filename.it.md.
Thus, I created two folders and precisely /content/post and /content/post_it where I saved the English and the Italian, respectively.

I would like to set a drop-down menu also for two menu voices only, working uniquely on the config.toml without adding any additional code.
If it’s possible, how should I configure the mentioned lines of the config.toml properly?

2

Any items that would be placed in a drop down for a given menu item can be added as a child item:

[[main]]
  identifier = "resources"
  name = "Resources"
  url = "/resources"
  weight = 1
  [[main]]
    identifier = "about"
    parent = "resources"
    name = "About"
    url = "/about"
    weight = 1
  [[main]]
    identifier = "blog"
    parent = "resources"
    name = "Blog"
    url = "/blog"
    weight = 2

Here are the relevant docs: Menus | Hugo

You can then reference the children items for each item via the item’s .Children property. You can look at the sample code here for further info: Menu Templates | Hugo

3

Thank you.
I tried, but it doesn’t work.
Probably there is the needing to intervene on the css, but I would avoid it.

4

without adding any additional code

Nothing you do in your config will enable a dropdown menu. You’ll have to either write the appropriate HTML and CSS in order to do so, or use a theme which already has that built in.

Can you link to your repo in order to see what templates/themes you are working with?

5

Took quite a while for me to sort that out. Till now I was using hard coded HTML for the menus. Now I change to the Hugo way. Which means, you must have a matching menu.html and a little extra CSS.

This is my menu.html: 
{{- if .Site.Menus.main }}
<nav class="bg-gray-900 flex text-gray-100 text-lg inline-block z-50">
	<ul class="flex">
		{{- $currentNode := . }}
		{{- range .Site.Menus.main }}
		{{- if .Name }}
		{{- if .HasChildren }}
		<li class="dropdown hover:bg-gray-800 p-4 {{ if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }} menu__item--active{{ end }}">
			<a class="" href="{{ .URL }}">
				{{ .Pre }}
				<span class="">{{ .Name }}</span>
				<label class="" for="{{ .Name }}">⮟</label>
				{{ .Post }}
			</a>
 
			<ul class="dropdown-content filter drop-shadow-xl min-w-max hidden block">
				{{ range .Children }}
					<li class=" {{ if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }} menu__item--active{{ end }}">
					<a class="bg-gray-700 hover:bg-gray-600 text-gray-100 p-3 block" href="{{ .URL }}">
						{{ .Pre }}
						<span class=" ">{{ .Name }}</span>
						{{ .Post }}
					</a>
					</li>
				{{ end }}
			</ul>
		</li>
		{{- else }}
		<li class="hover:bg-gray-800 p-4 {{ if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }} menu__item--active{{ end }}">
			<a class="" href="{{ .URL }}">
				{{ .Pre }}
				<span class="">{{ .Name }}</span>
				{{ .Post }}
			</a>
		</li>
		{{- end }}
		{{- end }}
		{{- end }}
	</ul>
</nav>
{{ else -}}
{{- end }}
And this is the added css: 
.dropdown-content {
  position: absolute;    
}
.dropdown:hover .dropdown-content {
  display: block;
}

If you are not familiar with Tailwind you can add a CDN link, in this case:
<link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

And add the above css for the menu separately. You can try without any CSS for styling, but the minimal CSS for the menu function is a must to show/hide the “children”.

6

Thank you.
You can find the repo here: GitHub - nicfab/myhugo
The final site is here: https://notes.nicfab.it
I look forward to receiving a reply from you.

7

Thank you.
I will take a look to your proposal

8

Based upon a cursory glance at the PaperMod theme, it does not appear to support dropdowns out of the box.

The newest version will actually allow you to include as CDN without a 3.9MB stylesheet: Try Tailwind CSS using the Play CDN - Tailwind CSS They still don’t recommend for prod.

9

Thank you