spz-menu 导航菜单

为页面和功能提供导航的菜单列表。

布局

何时使用

导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

该组件常用于顶部导航，侧边导航一般用 spz-nested-menu 组件。

代码演示

基本用法

最基本的用法，展示导航菜单不带有 moreLink。

在导航菜单中，我们需要在特定的位置加上对应的标识，组件才能识别当前的元素是子菜单、内联子菜单或者 moreLink。支持的属性标识如下：

属性名	说明	是否必需
spz-menu-submenu	标识当前菜单是一个子菜单	否
spz-menu-inline-submenu	标识当前菜单是子菜单内部的菜单，内联子菜单	否
spz-menu-more-link	标识当前菜单是一个 `moreLink` 菜单	否

Navigation One
Navigation Two
- Item 1
  - Option 1
  - Option 2
- Item 2
Navigation Two

<spz-menu layout="container">
  <ul>
    <li>Navigation One</li>
    <li>
      <div>Navigation Two</div>
      <ul spz-menu-submenu>
        <li spz-menu-inline-submenu>
          Item 1
          <ul spz-menu-submenu>
            <li>Option 1</li>
            <li>Option 2</li>
          </ul>
        </li>
        <li>Item 2</li>
      </ul>
    </li>
    <li>Navigation Two</li>
  </ul>
</spz-menu>

使用 moreLink

moreLink 菜单只有一级菜单不换行展示不下时，才会将一级菜单以及它的子菜单等收敛到 moreLink 菜单内部展示。

<div class="menu-wrapper">
  <spz-menu layout="container">
    <ul>
      <li>Navigation One</li>
      <li>
        <div>Navigation Two</div>
        <ul spz-menu-submenu>
          <li spz-menu-inline-submenu>
            Item 1
            <ul spz-menu-submenu>
              <li>Option 1</li>
              <li>Option 2</li>
            </ul>
          </li>
          <li>Item 2</li>
        </ul>
      </li>
      <li>Navigation Two</li>
      <li>Navigation Three</li>
      <li>Navigation Four</li>
      <li>Navigation Five</li>
      <li>Navigation Six</li>
      <li spz-menu-more-link>
        <div>More Link</div>
        <ul spz-menu-submenu></ul>
      </li>
    </ul>
  </spz-menu>
</div>

moreLink 模版

在 moreLink 菜单中，你可以使用模版来自定义菜单的显示形式和样式。

模版数据

属性名	说明	类型
offset	当前可展示的菜单索引数	number

<div class="m-w-full">
  <spz-menu layout="container">
    <ul class="m-space-x-4 m-whitespace-nowrap">
      <li>Navigation One</li>
      <li>
        <div>Navigation Two</div>
        <ul spz-menu-submenu>
          <li spz-menu-inline-submenu>
            Item 1
            <ul spz-menu-submenu>
              <li>Option 1</li>
              <li>Option 2</li>
            </ul>
          </li>
          <li>Item 2</li>
        </ul>
      </li>
      <li>Navigation Two</li>
      <li>Navigation Three</li>
      <li>Navigation Four</li>
      <li>Navigation Five</li>
      <li>Navigation Six</li>
      <li spz-menu-more-link>
        <div>More Link</div>
        <ul spz-menu-submenu>
          <template>
            <!-- ... -->
          </template>
        </ul>
      </li>
    </ul>
  </spz-menu>
</div>