タブスライド — メニュー項目をタブにグループ化
タブスライドとは？
すべてのメニュー項目を一度に表示するのではなく、タブスライドを使用すると、メニューをグループに整理し、各グループを別々のタブの下に配置できます。訪問者は単にタブをタップしてグループ間を切り替えることができ、長いメニューをクリーンでコンパクト、かつナビゲートしやすくします。
見た目はこんな感じ：
┌──────────────────────────────────┐
│ [Shop] [Blog] [Deals] │ ← タブ
│ ────── │
│ • T-Shirts │
│ • Pants │ ← "Shop"タブの内容
│ • Accessories │
└──────────────────────────────────┘
訪問者が”Blog”をタップすると、コンテンツは瞬時にブログ記事に切り替わります — ページの再読み込みは不要です。
タブスライドの設定方法
ステップ1 — タブマーカーを追加
- メニューツリーで、“アイテムを追加”をクリックします。
- アイテムタイプとしてタブスライド（青いタブアイコン）を選択します。
- タブ名を入力します（例：”Shop”、”Blog”、”Deals”）
- 追加をクリックします。
タブマーカーは、メニューツリーに青い[Tab]バッジと共に表示されます。
ステップ2 — タブにコンテンツを追加
タブマーカーの直下に配置されたすべてのメニュー項目は、そのタブに属します。
[Tab] Shop ← ステップ1で作成したタブマーカー
T-Shirts ← "Shop"タブに属する
Pants ← "Shop"タブに属する
Accessories ← "Shop"タブに属する
[Tab] Blog ← 次のタブマーカー
Latest News ← "Blog"タブに属する
Style Guides ← "Blog"タブに属する
ステップ3 — 追加のタブを追加（オプション）
必要なタブごとにステップ1–2を繰り返します。タブの数に制限はありません。
タブグループの終了
時には、特定のアイテムを常に表示したい場合があります — たとえば、下部にある”Contact”や”Search”リンクなどです。
これを行うには：
- 新しいタブスライドアイテムを追加します。
- 編集パネルで、“タブグループの終了”をチェックします。
- このマーカーの下にあるすべてのアイテムは、通常のメニュー項目として表示されます。
[Tab] Shop
T-Shirts, Pants...
[Tab] Blog
News, Guides...
[End of Tab group] ← タブの終了を示す
Contact Us ← 常に表示、タブ内にはない
About ← 常に表示
各タブのカスタマイズ
各タブマーカーは独立してスタイルを設定できます：
| オプション | 説明 |
|---|---|
| タブ名 | タブボタンに表示されるテキスト |
| アイコン | 名前の横にある小さなアイコン（アイコンライブラリから） |
| 画像 | アイコンの代わりに画像 |
| レイアウト | 名前の上/下/左/右にアイコン、アイコンのみ、またはテキストのみ |
| テキストカラー | 各タブラベルのカスタムカラー |
| テキストサイズ | 各タブラベルのカスタムフォントサイズ |
ヒント： レイアウトを”自動”のままにしておくと、ほとんどのメニューでうまく機能します — タブは最適な見た目に適応します。
どのメニュータイプがタブスライドをサポートしていますか？
タブスライドはすべてのNavi+メニュータイプで動作します：
- ✅ タブバー
- ✅ スライドメニュー
- ✅ メガメニュー
- ✅ FABメニュー
- ✅ グリッドメニュー
また、任意のメニュー階層で動作します — メインメニューだけでなく、サブメニュー内でも（レベル2、レベル3）動作します。
よくある質問
タブマーカーはメニュー項目として表示されますか？ いいえ。タブマーカーは訪問者には見えません — タブボタンを作成するだけです。実際のメニュー項目が各タブ内に表示されます。
タブにアイコンを追加できますか？ はい。タブマーカーを他のアイテムと同様に編集し、ライブラリからアイコンを選択するか、カスタム画像をアップロードします。
最初に表示されるタブはどれですか？ メニューが開くと、最初のタブが常にデフォルトで選択されます。
タブの数に制限はありますか？ 厳密な制限はありませんが、モバイル画面での最適な体験のために3〜6タブに抑えることをお勧めします。
サブメニュー内でタブスライドを使用できますか？ はい。任意のサブメニュー内にタブマーカーを配置し、そのレベルでタブの動作が機能します。