複数レベル構造

Navi+はメニューコンテンツを深く整理する2つの方法をサポートしています：親子ネスト（左右にドラッグしてインデント）とTab Slide（メニューを水平切り替えゾーンに分割）。どちらかの方法を単独で使用することも、組み合わせることもできます。

オプション1 — 親子ネスト（ドラッグでインデント）

ネストはフラットなリストを階層化された構造に変換します。親アイテムを展開すると子アイテムが表示されます。

Home                        ← レベル1（親）
  Collections               ← レベル2（子）
    New Arrivals            ← レベル3（孫）
    Sale
  Lookbook
Contact                     ← レベル1（親、子なし）

操作方法

ドラッグ＆ドロップで

  1. ネストしたいアイテムにカーソルを合わせます。
  2. 右方向にドラッグ — 上のアイテムの子としてスナップされます。
  3. 左方向にドラッグ — 親レベルに戻します。

キーボードショートカットで

  1. アイテムをクリックして選択します。
  2. →（右矢印キー）を押してインデント — 上のアイテムの子になります。
  3. ←（左矢印キー）を押してアウトデント — 一つ上のレベルに戻ります。

メニュータイプ別の最大ネスト深度

深度の制限はメニュータイプによって異なり、プランによって変わりません。

メニュータイプ 最大レベル数
Mobile Grid 1（ネスト不可）
FAB 2
Tab Bar、Mega Menu、Slide Menu、Desktop Mega Menu 3

制限を超えてインデントしようとすると、エディターがブロックしてメッセージを表示します。

オプション2 — Tab Slide（水平ゾーン）

Tab Slideはアイテムを水平タブに分割します。子アイテムのように下に展開するのではなく、各タブが別々のアイテムセットを表示します。

┌─────────────────────────────────┐
│  [Shop]  [Pages]  [More]        │  ← タブヘッダー
├─────────────────────────────────┤
│  • Collections                  │
│  • New Arrivals                 │  ← アクティブタブのコンテンツ
│  • Sale                         │
└─────────────────────────────────┘

操作方法

  1. Tab Markerタイプで新しいアイテムを追加します。
  2. Tab Markerのラベルを設定 — これがタブヘッダーテキストになります（例：「Shop」）。
  3. Tab Markerの下にアイテムを追加 — それらはそのタブのコンテンツエリアに属します。
  4. 繰り返す：次のTab Markerを追加し、そのタブのアイテムを追加します。
[Tab Marker]  "Shop"
  Collections
  New Arrivals
  Sale

[Tab Marker]  "Pages"
  About us
  Contact

[Tab Marker]  "More"
  Blog
  FAQ

どちらの方法を使うか？

目的 使用方法
親アイテムの下にサブカテゴリを表示する 親子ネスト（オプション1）
無関係なセクションを並べてグループ化する Tab Slide（オプション2）
複数カテゴリにまたがる多くのアイテムを持つメニュー Tab Slide
深いドリルダウンナビゲーション（カテゴリ→サブカテゴリ） 親子ネスト
各タブの中にネストされたアイテムを持つ外部タブ 両方

注意すべき制限

  • Tab Markerは他のアイテムの中にネストできません。 Tab Markerのインデントはブロックされます。
  • タブ内のアイテムは引き続き子アイテムを持てます — メニュータイプの深度制限が適用されます。
  • Mobile Gridはネストをサポートしていません — グループ化が必要な場合はTab Slideを使用してください。
  • Tab Markerを上下にドラッグしてタブを並べ替える — 下のアイテムも一緒に移動します。