# 导航

商家可以为店铺导航创建 [菜单](https://helpcenter.shoplazza.com/hc/zh-cn/articles/8886502978713)，这些菜单可以嵌套以 [创建下拉菜单](https://helpcenter.shoplazza.com/hc/zh-cn/articles/4407531996313-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%8F%9C%E5%8D%95%E5%AF%BC%E8%88%AA-)

本教程将介绍如何在 theme 中添加导航功能。

## 资源

*   [linklists object](/zh-CN/docs/theme/references/liquid/objects/linklists)
*   [linklist object](/zh-CN/docs/theme/references/liquid/objects/linklist)
*   [link object](/zh-CN/docs/theme/references/liquid/objects/link_item)

## 实现导航

要在 theme 中添加导航，您应引用 `linklist` object。每个 `linklist` object 代表在 Shoplazza 管理后台 **在线商店** > **导航** 部分中定义的一个菜单。

您可以使用全局 `linklists` object 通过 ID 访问店铺中所有的 `linklist` objects。Shoplazza 管理后台中的默认菜单是**主菜单**，可以通过其 id `header` 访问。

例如：

```liquid
{% for link in linklists['header'].links %}
  <!-- 菜单内容 -->
{% endfor %}
```

您可以使用 [link\_list setting](/zh-CN/docs/theme/architecture/settings/input-settings#link_list) 让商家选择自己的菜单，并使用 setting 的 id 引用该菜单。

```liquid
{% for link in linklists[section.settings.menu.id].links %}
  <!-- 菜单内容 -->
{% endfor %}
```

对于每个菜单链接，您应输出标题和 URL 等信息，同时也可能需要输出链接的子链接。链接最多可嵌套三层，您可以通过 `link` object 的 `links` 属性访问子链接。

例如，如果您已创建一个名为 `menu` 的 `link_list` 类型 setting，让商家选择要在 header section 中使用的菜单，以下代码展示了如何输出菜单内容。

**备注**

以下示例仅用于说明如何遍历 linklist 并输出多层级链接，并非完整的导航功能实现。

**sections/header.liquid**

```liquid
<ul>
  {% for link in linklists[section.settings.menu.id].links %}
    <li>
      <a href="{{ link.url }}">{{ link.title | escape }}</a>

      {% assign child_links = linklists[link.id].links %}
      {% if child_links %}
        <ul>
          {% for child_link in child_links %}
            <li>
              <a href="{{ child_link.url }}">{{ child_link.title | escape }}</a>

              {% assign grandchild_links = linklists[child_link.id].links %}
              {% if grandchild_links %}
                <ul>
                  {% for grandchild_link in grandchild_links %}
                    <li>
                      <a href="{{ grandchild_link.url }}">{{ grandchild_link.title | escape }}</a>
                    </li>
                  {% endfor %}
                </ul>
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </li>
  {% endfor %}
</ul>
```

根据您构建的导航类型，应将导航代码放在 header 或 footer sections 中。