Step 1: Add code in header.liquid:
Replace the following code
{%- liquid
if section.settings.menu != blank
if section.settings.menu_type_desktop == 'dropdown'
render 'header-dropdown-menu'
elsif section.settings.menu_type_desktop != 'drawer'
render 'header-mega-menu'
endif
endif
%}With the following code
{%- if section.settings.menu != blank -%}
{%- if section.settings.menu_type_desktop == 'dropdown' -%}
<nav class="header__inline-menu">
<ul class="list-menu list-menu--inline" role="list">
{%- for link in section.settings.menu.links -%}
{%- assign l1_loop_index = forloop.index -%}
<li>
{%- liquid
assign has_override_l1 = false
assign override_block_l1 = null
for block in section.blocks
if block.type == 'custom_dropdown' and block.settings.link_text_to_match == link.title
assign has_override_l1 = true
assign override_block_l1 = block
break
endif
endfor
-%}
{%- if has_override_l1 or link.links != blank -%}
<header-menu>
<details id="Details-HeaderMenu-{{ l1_loop_index }}">
<summary class="header__menu-item list-menu__item link focus-inset">
<span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
{{- 'icon-caret.svg' | inline_asset_content -}}
</summary>
<ul id="HeaderMenu-MenuList-{{ l1_loop_index }}" class="header__submenu list-menu list-menu--disclosure gradient caption-large motion-reduce global-settings-popup">
{%- assign l2_links = link.links -%}
{%- if has_override_l1 -%}
{%- assign l2_links = linklists[override_block_l1.settings.custom_dropdown_menu].links -%}
{%- endif -%}
{%- for childlink in l2_links -%}
{%- assign l2_loop_index = forloop.index -%}
<li>
{%- liquid
assign has_override_l2 = false
assign override_block_l2 = null
for block in section.blocks
if block.type == 'custom_dropdown' and block.settings.link_text_to_match == childlink.title
assign has_override_l2 = true
assign override_block_l2 = block
break
endif
endfor
-%}
{%- if has_override_l2 or childlink.links != blank -%}
<details id="Details-HeaderSubMenu-{{ l1_loop_index }}-{{ l2_loop_index }}">
<summary class="header__menu-item link link--text list-menu__item focus-inset caption-large">
<span>{{ childlink.title | escape }}</span>
<span class="svg-wrapper">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</summary>
<ul id="HeaderMenu-SubMenuList-{{ l1_loop_index }}-{{ l2_loop_index }}" class="list-menu motion-reduce">
{%- assign l3_links = childlink.links -%}
{%- if has_override_l2 -%}
{%- assign l3_links = linklists[override_block_l2.settings.custom_dropdown_menu].links -%}
{%- endif -%}
{%- for grandchildlink in l3_links -%}
<li>
{%- liquid
assign has_override_l3 = false
assign override_block_l3 = null
for block in section.blocks
if block.type == 'custom_dropdown' and block.settings.link_text_to_match == grandchildlink.title
assign has_override_l3 = true
assign override_block_l3 = block
break
endif
endfor
-%}
{%- if has_override_l3 or grandchildlink.links != blank -%}
<details id="Details-HeaderSubMenu-L3-{{ l1_loop_index }}-{{ l2_loop_index }}-{{ forloop.index }}">
<summary class="header__menu-item link link--text list-menu__item focus-inset caption-large">
<span>{{ grandchildlink.title | escape }}</span>
{%- if linklists[override_block_l3.settings.custom_dropdown_menu].links.size > 0 or grandchildlink.links.size > 0 -%}
<span class="svg-wrapper">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
{%- endif -%}
</summary>
<ul id="HeaderMenu-SubMenuList-L3-{{ l1_loop_index }}-{{ l2_loop_index }}-{{ forloop.index }}" class="list-menu motion-reduce">
{%- assign l4_links = grandchildlink.links -%}
{%- if has_override_l3 -%}
{%- assign l4_links = linklists[override_block_l3.settings.custom_dropdown_menu].links -%}
{%- endif -%}
{%- for final_link in l4_links -%}
<li><a href="{{ final_link.url }}" class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if final_link.current %} list-menu__item--active{% endif %}">{{ final_link.title | escape }}</a></li>
{%- endfor -%}
</ul>
</details>
{%- else -%}
<a href="{{ grandchildlink.url }}" class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if grandchildlink.current %} list-menu__item--active{% endif %}">{{ grandchildlink.title | escape }}</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</details>
{%- else -%}
<a href="{{ childlink.url }}" class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if childlink.current %} list-menu__item--active{% endif %}">{{ childlink.title | escape }}</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</details>
</header-menu>
{%- else -%}
<a href="{{ link.url }}" class="header__menu-item list-menu__item link link--text focus-inset">{{ link.title | escape }}</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</nav>
{%- elsif section.settings.menu_type_desktop == 'mega' -%}
{%- render 'header-mega-menu' -%}
{%- endif -%}
{%- endif -%}Add the following code after “type”: “@app”
,{
"type": "custom_dropdown",
"name": "Custom Dropdown Item",
"settings": [
{
"type": "text",
"id": "link_text_to_match",
"label": "Menu item to override",
"info": "Enter the exact name of the menu item from your main menu that you want to replace with a custom dropdown."
},
{
"type": "link_list",
"id": "custom_dropdown_menu",
"label": "Custom Dropdown Menu",
"info": "Select the menu to show as a dropdown for the item specified above."
}
]
}Step 2: Add code in header-drawer.liquid:
Replace the following code
<nav class="menu-drawer__navigation">
<ul class="menu-drawer__menu has-submenu list-menu" role="list">
{%- for link in section.settings.menu.links -%}
<li>
{%- if link.links != blank -%}
<details id="Details-menu-drawer-menu-item-{{ forloop.index }}">
<summary
id="HeaderDrawer-{{ link.handle }}"
class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.child_active %} menu-drawer__menu-item--active{% endif %}"
>
{{ link.title | escape }}
<span class="svg-wrapper">
{{- 'icon-arrow.svg' | inline_asset_content -}}
</span>
<span class="svg-wrapper">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</summary>
<div
id="link-{{ link.handle | escape }}"
class="menu-drawer__submenu has-submenu gradient motion-reduce"
tabindex="-1"
>
<div class="menu-drawer__inner-submenu">
<button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
<span class="svg-wrapper">
{{- 'icon-arrow.svg' | inline_asset_content -}}
</span>
{{ link.title | escape }}
</button>
<ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
{%- for childlink in link.links -%}
<li>
{%- if childlink.links == blank -%}
<a
id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
href="{{ childlink.url }}"
class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"
{% if childlink.current %}
aria-current="page"
{% endif %}
>
{{ childlink.title | escape }}
</a>
{%- else -%}
<details id="Details-menu-drawer-{{ link.handle }}-{{ childlink.handle }}">
<summary
id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
class="menu-drawer__menu-item link link--text list-menu__item focus-inset"
>
{{ childlink.title | escape }}
<span class="svg-wrapper">
{{- 'icon-arrow.svg' | inline_asset_content -}}
</span>
<span class="svg-wrapper">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</summary>
<div
id="childlink-{{ childlink.handle | escape }}"
class="menu-drawer__submenu has-submenu gradient motion-reduce"
>
<button
class="menu-drawer__close-button link link--text focus-inset"
aria-expanded="true"
>
<span class="svg-wrapper">
{{- 'icon-arrow.svg' | inline_asset_content -}}
</span>
{{ childlink.title | escape }}
</button>
<ul
class="menu-drawer__menu list-menu"
role="list"
tabindex="-1"
>
{%- for grandchildlink in childlink.links -%}
<li>
<a
id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ grandchildlink.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
</div>
</details>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
</div>
</details>
{%- else -%}
<a
id="HeaderDrawer-{{ link.handle }}"
href="{{ link.url }}"
class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.current %} menu-drawer__menu-item--active{% endif %}"
{% if link.current %}
aria-current="page"
{% endif %}
>
{{ link.title | escape }}
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</nav> With the following code
<nav class="menu-drawer__navigation">
<ul class="menu-drawer__menu has-submenu list-menu" role="list">
{%- for link in section.settings.menu.links -%}
{%- assign l1_loop_index = forloop.index -%}
<li>
{%- liquid
assign has_override_l1 = false
assign override_block_l1 = null
for block in section.blocks
if block.type == 'custom_dropdown' and block.settings.link_text_to_match == link.title
assign has_override_l1 = true
assign override_block_l1 = block
break
endif
endfor
-%}
{%- if has_override_l1 or link.links != blank -%}
<details id="Details-menu-drawer-menu-item-{{ l1_loop_index }}">
<summary
id="HeaderDrawer-{{ link.handle }}"
class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.child_active %} menu-drawer__menu-item--active{% endif %}"
>
{{ link.title | escape }}
<span class="svg-wrapper">
{{- 'icon-arrow.svg' | inline_asset_content -}}
</span>
<span class="svg-wrapper">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</summary>
<div
id="link-{{ link.handle | escape }}"
class="menu-drawer__submenu has-submenu gradient motion-reduce"
tabindex="-1"
>
<div class="menu-drawer__inner-submenu">
<button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
<span class="svg-wrapper">
{{- 'icon-arrow.svg' | inline_asset_content -}}
</span>
{{ link.title | escape }}
</button>
<ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
{%- assign l2_links = link.links -%}
{%- if has_override_l1 -%}
{%- assign l2_links = linklists[override_block_l1.settings.custom_dropdown_menu].links -%}
{%- endif -%}
{%- for childlink in l2_links -%}
{%- assign l2_loop_index = forloop.index -%}
<li>
{%- liquid
assign has_override_l2 = false
assign override_block_l2 = null
for block in section.blocks
if block.type == 'custom_dropdown' and block.settings.link_text_to_match == childlink.title
assign has_override_l2 = true
assign override_block_l2 = block
break
endif
endfor
-%}
{%- if has_override_l2 or childlink.links != blank -%}
<details id="Details-menu-drawer-{{ link.handle }}-{{ childlink.handle }}">
<summary
id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
class="menu-drawer__menu-item link link--text list-menu__item focus-inset"
>
{{ childlink.title | escape }}
<span class="svg-wrapper">
{{- 'icon-arrow.svg' | inline_asset_content -}}
</span>
<span class="svg-wrapper">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</summary>
<div
id="childlink-{{ childlink.handle | escape }}"
class="menu-drawer__submenu has-submenu gradient motion-reduce"
>
<button
class="menu-drawer__close-button link link--text focus-inset"
aria-expanded="true"
>
<span class="svg-wrapper">
{{- 'icon-arrow.svg' | inline_asset_content -}}
</span>
{{ childlink.title | escape }}
</button>
<ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
{%- assign l3_links = childlink.links -%}
{%- if has_override_l2 -%}
{%- assign l3_links = linklists[override_block_l2.settings.custom_dropdown_menu].links -%}
{%- endif -%}
{%- for grandchildlink in l3_links -%}
<li>
{%- liquid
assign has_override_l3 = false
assign override_block_l3 = null
for block in section.blocks
if block.type == 'custom_dropdown' and block.settings.link_text_to_match == grandchildlink.title
assign has_override_l3 = true
assign override_block_l3 = block
break
endif
endfor
-%}
{%- if has_override_l3 or grandchildlink.links != blank -%}
<details id="Details-menu-drawer-L3-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}">
<summary class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
{{ grandchildlink.title | escape }}
<span class="svg-wrapper">
{{- 'icon-arrow.svg' | inline_asset_content -}}
</span>
<span class="svg-wrapper">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</summary>
<div id="grandchildlink-{{ grandchildlink.handle | escape }}" class="menu-drawer__submenu has-submenu gradient motion-reduce">
<button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
<span class="svg-wrapper">
{{- 'icon-arrow.svg' | inline_asset_content -}}
</span>
{{ grandchildlink.title | escape }}
</button>
<ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
{%- assign l4_links = grandchildlink.links -%}
{%- if has_override_l3 -%}
{%- assign l4_links = linklists[override_block_l3.settings.custom_dropdown_menu].links -%}
{%- endif -%}
{% for final_link in l4_links %}
<li>
<a href="{{ final_link.url }}" class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if final_link.current %} menu-drawer__menu-item--active{% endif %}">
{{ final_link.title | escape }}
</a>
</li>
{% endfor %}
</ul>
</div>
</details>
{%- else -%}
<a
id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ grandchildlink.title | escape }}
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
</details>
{%- else -%}
<a
id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
href="{{ childlink.url }}"
class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"
{% if childlink.current %}
aria-current="page"
{% endif %}
>
{{ childlink.title | escape }}
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
</div>
</details>
{%- else -%}
<a
id="HeaderDrawer-{{ link.handle }}"
href="{{ link.url }}"
class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.current %} menu-drawer__menu-item--active{% endif %}"
{% if link.current %}
aria-current="page"
{% endif %}
>
{{ link.title | escape }}
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</nav>Step 3: Add code in header-mega-menu.liquid:
Replace the following code
<ul class="list-menu list-menu--inline" role="list">
{%- for link in section.settings.menu.links -%}
<li>
{%- if link.links != blank -%}
<header-menu>
<details id="Details-HeaderMenu-{{ forloop.index }}" class="mega-menu">
<summary
id="HeaderMenu-{{ link.handle }}"
class="header__menu-item list-menu__item link focus-inset"
>
<span
{%- if link.child_active %}
class="header__active-menu-item"
{% endif %}
>
{{- link.title | escape -}}
</span>
{{- 'icon-caret.svg' | inline_asset_content -}}
</summary>
<div
id="MegaMenu-Content-{{ forloop.index }}"
class="mega-menu__content color-{{ section.settings.menu_color_scheme }} gradient motion-reduce global-settings-popup"
tabindex="-1"
>
<ul
class="mega-menu__list page-width{% if link.levels == 1 %} mega-menu__list--condensed{% endif %}"
role="list"
>
{%- for childlink in link.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
href="{{ childlink.url }}"
class="mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %}"
{% if childlink.current %}
aria-current="page"
{% endif %}
>
{{ childlink.title | escape }}
</a>
{%- if childlink.links != blank -%}
<ul class="list-unstyled" role="list">
{%- for grandchildlink in childlink.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ grandchildlink.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
</details>
</header-menu>
{%- else -%}
<a
id="HeaderMenu-{{ link.handle }}"
href="{{ link.url }}"
class="header__menu-item list-menu__item link link--text focus-inset"
{% if link.current %}
aria-current="page"
{% endif %}
>
<span
{%- if link.current %}
class="header__active-menu-item"
{% endif %}
>
{{- link.title | escape -}}
</span>
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>With the following code
<ul class="list-menu list-menu--inline" role="list">
{%- for link in section.settings.menu.links -%}
<li>
{%- liquid
assign has_override_l1 = false
assign override_block_l1 = null
for block in section.blocks
if block.type == 'custom_dropdown' and block.settings.link_text_to_match == link.title
assign has_override_l1 = true
assign override_block_l1 = block
break
endif
endfor
-%}
{%- if has_override_l1 or link.links != blank -%}
<header-menu>
<details id="Details-HeaderMenu-{{ forloop.index }}" class="mega-menu">
<summary
id="HeaderMenu-{{ link.handle }}"
class="header__menu-item list-menu__item link focus-inset"
>
<span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>
{{- link.title | escape -}}
</span>
{{- 'icon-caret.svg' | inline_asset_content -}}
</summary>
<div
id="MegaMenu-Content-{{ forloop.index }}"
class="mega-menu__content color-{{ section.settings.menu_color_scheme }} gradient motion-reduce global-settings-popup"
tabindex="-1"
>
<ul
class="mega-menu__list page-width{% if link.levels == 1 %} mega-menu__list--condensed{% endif %}"
role="list"
>
{%- liquid
assign l2_links = link.links
if has_override_l1
assign l2_links = linklists[override_block_l1.settings.custom_dropdown_menu].links
endif
-%}
{%- for childlink in l2_links -%}
<li>
{%- liquid
assign has_override_l2 = false
assign override_block_l2 = null
for block in section.blocks
if block.type == 'custom_dropdown' and block.settings.link_text_to_match == childlink.title
assign has_override_l2 = true
assign override_block_l2 = block
break
endif
endfor
-%}
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
href="{{ childlink.url }}"
class="mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %}"
{% if childlink.current %}
aria-current="page"
{% endif %}
>
{{ childlink.title | escape }}
</a>
{%- liquid
assign l3_links = childlink.links
if has_override_l2
assign l3_links = linklists[override_block_l2.settings.custom_dropdown_menu].links
endif
-%}
{%- if l3_links != blank -%}
<ul class="list-unstyled" role="list">
{%- for grandchildlink in l3_links -%}
<li>
{%- liquid
assign has_override_l3 = false
assign override_block_l3 = null
for block in section.blocks
if block.type == 'custom_dropdown' and block.settings.link_text_to_match == grandchildlink.title
assign has_override_l3 = true
assign override_block_l3 = block
break
endif
endfor
-%}
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ grandchildlink.title | escape }}
</a>
{%- liquid
assign l4_links = grandchildlink.links
if has_override_l3
assign l4_links = linklists[override_block_l3.settings.custom_dropdown_menu].links
endif
-%}
{%- if l4_links != blank -%}
<ul class="list-unstyled" role="list">
{%- for final_link in l4_links -%}
<li>
<a href="{{ final_link.url }}" class="mega-menu__link link{% if final_link.current %} mega-menu__link--active{% endif %}">
{{ final_link.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
</details>
</header-menu>
{%- else -%}
<a
id="HeaderMenu-{{ link.handle }}"
href="{{ link.url }}"
class="header__menu-item list-menu__item link link--text focus-inset"
{% if link.current %}
aria-current="page"
{% endif %}
>
<span {%- if link.current %} class="header__active-menu-item"{% endif %}>
{{- link.title | escape -}}
</span>
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
Results:
