menu

Binds a widget to a navigation menu defined in the store settings. Returns an array of menu items, each with title, url, and optional children for nested submenus.

Properties

Property	Type	Required	Description
type	"menu"	Yes	Field type identifier
label	string	Yes	Label shown in the builder
default	string	No	Default menu handle (e.g., "header")

Usage

schema.json

{
  "nav": {
    "type": "menu",
    "label": "Menu",
    "default": "header"
  }
}

Template

<nav>
  {% for item in widget.settings.nav %}
    <a href="{{ item.url }}">{{ item.title }}</a>

    {# Render submenu if it has children #}
    {% if item.children %}
      <ul>
        {% for child in item.children %}
          <li><a href="{{ child.url }}">{{ child.title }}</a></li>
        {% endfor %}
      </ul>
    {% endif %}
  {% endfor %}
</nav>

Output

{
  "nav": [
    { "title": "الصفحة الرئيسية", "url": "/" },
    { "title": "مجموعة", "url": "/collection/example" },
    { "title": "منتجات", "url": "/collection/all" },
    {
      "title": "قائمه فرعية",
      "children": [
        { "title": "الصفحة الرئيسية", "url": "/" },
        { "title": "منتجات", "url": "/collection/all" }
      ]
    }
  ]
}

Menu item structure

Each menu item has title and url. Items with nested links also have a children array containing sub-items with the same structure.

Interactive Preview

Interactive Preview

Menu

Home/

Products/collection/all

Categories

Live Output

{
  "nav": [
    {
      "title": "Home",
      "url": "/"
    },
    {
      "title": "Products",
      "url": "/collection/all"
    },
    {
      "title": "Categories",
      "children": [
        {
          "title": "New Arrivals",
          "url": "/collection/new"
        },
        {
          "title": "Best Sellers",
          "url": "/collection/best"
        }
      ]
    }
  ]
}