Feature request: sub-menus?

[CarlosGrohmann]

Description

Is it possible to have sub-menus? Something like About->CV / About->contact

[ayushjain01]

Hi @CarlosGrohmann, I came up with a way to add submenus. First, add them in the navigation.yml like this -

  - titles: More
    submenu:
      - title: Page 1
        url: /page1.html
      - title: Page 2
        url: /page-2.html

Next in the header.html file, add the below code -

{%- if _item.submenu -%}
    <li class="navigation__item">
      <a href="{{ _item.url }}">{{ _item.titles }}</a>
      <ul class="submenu">
        {%- for _subitem in _item.submenu -%}
          {%- include snippets/get-nav-url.html path=_subitem.url -%}
          {%- assign _nav_url = __return -%}
          {%- include snippets/get-nav-url.html path=page.url -%}
          {%- assign _page_url = __return -%}
          <li class="navigation__item{% if _nav_url == _page_url or (page.nav_key and _subitem.key and page.nav_key == _subitem.key) %} navigation__item--active{% endif %}">
            <a href="{{ _nav_url }}">{{ _subitem.title | default: __return }}</a>
          </li>
        {%- endfor -%}
      </ul>
    </li>

The else part can have the remaining code. and to style the header, modify the _header.scss file

.submenu {
  display: none; 
  position: absolute;
  background-color: $header-background;
  list-style: none;
  padding: 0;

  li {
    padding: 0.5rem 1rem; 
  }
}

.submenu:hover {
  display: block; 
}

You can view this at https://github.com/ayushjain01/learn-pip-trends/ for a better understanding.