Open CarlosGrohmann opened 1 year ago
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.
Description
Is it possible to have sub-menus? Something like About->CV / About->contact