Cuttlefish Docs
  • 简体中文

    • spz-menu 导航菜单

    支持布局: container fixed fixed-height

    何时使用

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

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

    代码演示

    基本用法

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

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

    属性名说明是否必需
    spz-menu-submenu标识当前菜单是一个子菜单否
    spz-menu-inline-submenu标识当前菜单是子菜单内部的菜单，内联子菜单否
    spz-menu-more-link标识当前菜单是一个 moreLink 菜单否
    <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 菜单内部展示。

    <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 菜单中，你可以使用模版来自定义菜单的显示形式和样式。

    模版数据

    属性名说明类型
    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>

    方法

    更新菜单列表，重新根据位置计算并渲染，无需参数。

    AI 摘要（LLM Ready）

    • 组件标识：spz-menu
    • 用途一句话：为页面和功能提供导航的菜单列表。
    • 可识别属性条目：0
    • 可识别方法小节：1
    • 可识别事件小节：0
    • 关键属性名（Top）：无（待补充）
    • 关键方法名（Top）：updateMoreLink
    • 关键事件名（Top）：无（待补充）
    • 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
    • 关联文档：/guide/actions-and-events/ 、/guide/layouts/