Store's Main Navigation Menu
The main navigation menu plays a vital role in guiding customers through the store, enhancing their browsing experience. As a theme developer, it’s essential to integrate this menu into your theme to reflect the merchant’s customized structure.
Merchant Control Over the Menu
Merchants can design and structure their main navigation menu through the Store Main Menu Settings page. They have the flexibility to enable pages and add custom based on their store’s needs, ensuring the menu aligns with their brand and customer journey.
![Store Main Menu](https://api.apidog.com/api/v1/projects/613905/resources/346143/image-preview)Retrieving Menu Data
All menu updates made by merchants are stored in the main navigation menu data object. For details on its structure, refer to the data schema.
As a developer, you can loop through this data to dynamically render the menu in your theme.
Code Snippet Integration for Theme Partners
Below is a sample code snippet to help you implement the main navigation menu:
<div class="top-main-menu-wrapper">
<nav role="navigation" class="d-flex flex-grow-1 main-nav-wrapper">
<ul class="main-nav d-flex flex-grow-1 flex-wrap menu-header-theme-text-for-primary-bg">
{% for menu in main_navigation_menu.items %}
{% if menu.url %}
<li class="top-level-link {% if menu.slug == 'all_categories' %} all-categories {% endif %}">
<a href="{{ menu.url }}"
{% if menu.items | length > 0 %} class="mega-menu" {% endif %}>
<span>{{ menu.name }}</span>
</a>
{% if menu.items | length > 0 %}
<div class="sub-menu-block">
<div class="row">
{% for menu_sub in menu.items %}
<div class="col-md-4 col-lg-4 col-sm-4">
{% if menu_sub.items | length > 0 %}
<h2 class="sub-menu-head">
<a style="font-size: 1.16rem; color: inherit" href="{{ menu_sub.url }}">
{{ menu_sub.name }}
</a>
</h2>
<ul class="sub-menu-lists">
{% for menu_sub_sub in menu_sub.items %}
<li><a href="{{ menu_sub_sub.url }}">{{ menu_sub_sub.name }}</a></li>
{% endfor %}
</ul>
{% else %}
<h2 class="sub-menu-head">
<a style="font-size: 1.16rem; color: inherit" href="{{ menu_sub.url }}">
{{ menu_sub.name }}
</a>
</h2>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
</nav>
</div>