Skip to content

Navigation or Menus

Md Sojon Islam edited this page Aug 18, 2021 · 1 revision

Main Menu or Navigation

You will see a menus.toml file in the exampleSite/config/_default folder. Which gives you the ability to change menu-links of your site.

Navigation is a loop item, so you can add more menu items by copying its loop, or you can remove it also.

Navigation loop starts with [[menu.main]] heading.

  • name is for the navigation item name.
  • URL is for the page URL, just give the page name here, it will automatically add the base URL from your site. like if you want to give the about page URL here, just type URL = about.
  • weight is for your navigation sorting, the smaller number weight will show first.
  • For dropdown menu you need to add another attribute called hasChildren = true and remove URL. then give 1 tab space for understanding Hugo that is a children's menu item. Then copy and paste this [[menu.main]] again, then give the parent = attribute here. parent name should be the dropdown item name, then give the page name and URL.
Main Menu or Navigation.
[[main]]
name = "Home"
url = "/"
weight = 1

[[main]]
name = "About"
url = "about/"
weight = 2

[[main]]
name = "Contact"
url = "contact/"
weight = 3

[[main]]
name = "pages"
url = "pages/"
weight = 3
hasChildren = true

  [[main]]
  parent = "pages"
  name = "Privacy Policy"
  url = "privacy-policy/"
Footer Menu
[[footer]]
name = "Home"
url = "/"
weight = 1

[[footer]]
name = "About"
url = "about/"
weight = 2

[[footer]]
name = "Contact"
url = "contact/"
weight = 3

[[footer]]
name = "Privacy Policy"
url = "privacy-policy/"
weight = 4

Clone this wiki locally