How to Add Nested Navigation in Hugo?

On a website, the essential section is the Navigation bar. It can be shown either as a sidebar menu or a topbar menu. In both cases, the primary purpose is to navigate through pages. Hugo is built with many tools and templates to start and run quickly. Hugo provides all of the functions to create a menu. Unfortunately, Hugo does not provide any default structure for the Nested menu. However, we can customize them by following simple steps to fit our needs. 

To add nested Navigation, We have to follow the following steps:

• First, configure config.toml file to add a menu on the website.
• Create a layouts/partials/header.html ** to add html for the menu or submenu.
• Use  layouts/partials/header.html ** On layouts/_defaults/baseof.html template.
• Update CSS to show the menu according to the design.

**  You can name it whatever you want

Configuring config.toml file

Add the following codes in the config.toml file. You should understand everything in [[menu.Main]]. We will discuss the codes below.

[Menu]
 [[menu.Main]]
  identifier = "home"
  name = "Home"
  url = "/blog"
  weight = 1
 [[menu.Main]]
  identifier = "blog"
  name = "Blog"
  url = "/blog"
  weight = 2
    [[menu.Main]]
      name = "Blog1"
      url = "/blog/1"
      parent = "blog"
      weight = 1
    [[menu.Main]]
      name = "Blog2"
      url = "/blog/2"
      parent = "blog"
      weight = 2
    [[menu.Main]]
      name = "Blog3"
      url = "/blog/3"
      parent = "blog"
      weight = 3

• identifier must be the unique name of the menu. It is used to identify menu, submenu and their relation by Hugo internally. Later we will link a submenu by using this name in parent.
• name should be the name shown as the navigation item name.
• url is a relative URL that will be opened when you click on the navigation item.
• weight is for sequencing the menu items. less weight in a menu means it will appear first in the navigation item. The same applies to nested menus.
• parent is used in submenu items only to tell who is the submenu's parent. In parent, we use the identifier name to tell who the parent is and for which menu this will be the sub-menu.

Create a layouts/partials/header.html

Go to the theme/themeName folder. Find out layouts folder. Enter into it. Find out partials folder. Enter into it and create a header.html file. Open it with a code editor. Now paste the following codes

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      {{ $current := . }}
        {{ range .Site.Menus.main }}
          {{ $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) }}
          {{if .HasChildren }}
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {{.Name}}
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                {{ range .Children }}
                    <li class="{{ if $active }}active{{ end }}">
                        <a href="{{ .URL }}" class="dropdown-item">{{ .Name }}</a>
                    </li>
                {{ end }}
              </ul>
            </li>
          {{ else }}
          <li class="nav-item {{ if $active }}active{{ end }}">
            <a class="nav-link" href="{{.URL | absURL}}">{{.Name}}</a>
          </li>
          {{ end }}
        {{ end }}
    </ul>
  </div>
</nav>

• Use  layouts/partials/header.html ** On layouts/_defaults/baseof.html template.
  To use  layouts/partials/header.html ** On layouts/_defaults/baseof.html template, just use the following code inside the <body></body> tag  

{{- partial "header.html" . -}}

• Use  CSS to give style to the menu
  Feel free to add CSS code to your CSS file according to your needs to get certain navigation styles. As we use a bootstrap navbar, we will get an excellent navbar style automatically.

To make it simple, I use the default bootstrap navbar. Click here to learn more about Bootstrap. You can feel free to use others or create your own. Thanks for reading. This tutorial will help you achieve your goal of making a nested menu.