Cuttlefish Docs
  • English

    • spz-nested-menu

    Supported layouts: fill

    When to Use

    A navigation menu is the soul of a website, with users relying on it to jump between pages. It generally comes in two forms: top navigation and side navigation. The top navigation provides global categories and functions, while the side navigation offers a multi-level structure to accommodate and arrange the website's architecture.

    This component is commonly used for top-side navigation, with top navigation typically using the spz-menu component.

    Code Demonstration

    Basic Usage

    Property NameDescription
    spz-nested-submenuIndicates the current menu is a submenu, it will have an open attribute when visible
    spz-nested-submenu-openIndicates the current menu has a submenu
    spz-nested-submenu-closeIndicates the button to return to the previous menu level
    child-openIndicates whether the current menu is visible. If a submenu is visible, the spz-nested-menu element will have this attribute; if a submenu with the spz-nested-submenu element is visible, this element will also have this attribute
    openIndicates the current submenu is visible
    <div class="nested-menu-wrapper">
  <h3>Nested menu</h3>
  <div class="nested-menu-inner-wrapper">
    <spz-nested-menu layout="fill" side="right">
      <ul>
        <li>Navigation 1</li>
        <li>
          <div spz-nested-submenu-open>Navigation 2 (Has next submenu)</div>
          <ul spz-nested-submenu>
            <li spz-nested-submenu-close>Back</li>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>
              <div spz-nested-submenu-open>Item 4 (Has next submenu)</div>
              <ul spz-nested-submenu>
                <li spz-nested-submenu-close>Back</li>
                <li>Option 1</li>
                <li>Option 2</li>
                <li>Option 3</li>
              </ul>
            </li>
          </ul>
        </li>
        <li>Navigation 3</li>
        <li>Navigation 4</li>
        <li>Navigation 5</li>
      </ul>
    </spz-nested-menu>
  </div>
</div>

    Properties

    Property NameDescriptionTypeDefault ValueMandatory
    sideDirection of the menu switch animation"left" | "right"-Yes

    Methods

    reset

    Resets the menu to its initial state, no parameters required.

    AI Summary (LLM Ready)

    • Component ID: spz-nested-menu
    • One-line purpose: A sidebar menu providing navigation for pages and features.
    • Detected attribute rows: 0
    • Detected method subsections: 1
    • Detected event subsections: 0
    • Top attribute names: none (needs manual completion)
    • Top method names: reset
    • 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/