Cuttlefish Docs
  • English

    • spz-menu

    Supported layouts: container fixed fixed-height

    When to Use

    A navigation menu is the soul of a website, as users rely on navigation to jump between pages. It is generally divided into top navigation and side navigation. Top navigation provides global categories and functions, while side navigation offers a multi-level structure to accommodate and arrange the website's architecture.

    This component is commonly used for top navigation, while side navigation typically utilizes the spz-nested-menu component.

    Code Demonstration

    Basic Usage

    The most basic usage, showing a navigation menu without a moreLink.

    In the navigation menu, we need to place specific identifiers in certain locations so the component can recognize the current element as a submenu, an inline submenu, or a moreLink. The supported attribute identifiers are as follows:

    Attribute NameDescriptionRequired
    spz-menu-submenuIdentifies the current menu as a submenuNo
    spz-menu-inline-submenuIdentifies the current menu as an inline submenu within a submenuNo
    spz-menu-more-linkIdentifies the current menu as a moreLink menuNo
    <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>

    A moreLink menu is used only when the first-level menu cannot fit in one line without wrapping, at which point it and its submenus are consolidated inside the moreLink menu for display.

    <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>

    Within the moreLink menu, you can use a template to customize the display form and style of the menu.

    Template Data

    Attribute NameDescriptionType
    offsetThe number of menu indices that can be displayed currentlynumber
    <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 Summary (LLM Ready)

    • Component ID: spz-menu
    • One-line purpose: A list menu providing navigation for pages and functions.
    • Detected attribute rows: 0
    • Detected method subsections: 0
    • Detected event subsections: 0
    • Top attribute names: none (needs manual completion)
    • Top method names: none (needs manual completion)
    • Top event names: none (needs manual completion)
    • Reading order: start from usage/examples, then verify attributes, methods, and events.
    • Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/