マルチレベル構造
Navi+は、メニューコンテンツを深く整理するための2つの方法をサポートしています: 親子のネスト（左/右にドラッグしてインデント）とTab Slide（メニューを水平切り替えゾーンに分割）。どちらのアプローチも使用することができ、両方を組み合わせることもできます。
オプション1 — 親子のネスト（ドラッグでインデント）
ネストはフラットなリストを階層に変えます。親アイテムは子アイテムを表示するために展開できます。
Home ← レベル1（親）
Collections ← レベル2（子）
New Arrivals ← レベル3（孫）
Sale
Lookbook
Contact ← レベル1（親、子なし）
方法
ドラッグアンドドロップで
- ネストしたいアイテムにカーソルを合わせます。
- 右にドラッグします — 上のアイテムの下に子としてスナップします。
- 左にドラッグして親レベルに戻します。
キーボードショートカットで
- アイテムをクリックして選択します。
→（右矢印）を押してインデントします — アイテムは上のアイテムの子になります。←（左矢印）を押してアウトデントします — アイテムは1レベル上に戻ります。
メニュータイプによる最大ネスト深度
深度制限はメニュータイプに依存し、プランには依存しません。
| メニュータイプ | 最大レベル |
|---|---|
| モバイルグリッド | 1（ネストなし） |
| FAB | 2 |
| タブバー、メガメニュー、スライドメニュー、デスクトップメガメニュー | 3 |
制限を超えてインデントしようとすると、エディタがブロックし、メッセージが表示されます。
オプション2 — Tab Slide（水平ゾーン）
Tab Slideはアイテムを水平タブに分割します。子のように下に展開するのではなく、各タブは別のアイテムセットを表示します。
┌─────────────────────────────────┐
│ [Shop] [Pages] [More] │ ← タブヘッダー
├─────────────────────────────────┤
│ • Collections │
│ • New Arrivals │ ← アクティブタブのコンテンツ
│ • Sale │
└─────────────────────────────────┘
方法
- Tab Markerの種類で新しいアイテムを追加します。
- Tab Markerラベルを設定します — これがタブヘッダーのテキストになります（例: “Shop”）。
- Tab Markerの下にアイテムを追加します — それらはそのタブのコンテンツエリアに属します。
- 繰り返し: 次の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 Markersは他のアイテムの中にネストできません。 Tab Markerをインデントすることはブロックされます。
- タブ内のアイテムはまだ子を持つことができます — メニュータイプの深度制限に従います。
- モバイルグリッドはネストをサポートしていません — グループ化が必要な場合はTab Slideを使用してください。
- タブを再配置するには、Tab Markerを上下にドラッグします — その下のアイテムも一緒に移動します。