Liquid Snippets by ALSEL
🧭 ヘッダー/フッター/ナビゲーション中級

デスクトップナビゲーションメニュー

Bootstrap のドロップダウン機能を使ったデスクトップ向けのグローバルナビゲーション。メインメニューのリンクリストをループし、サブメニュー有無に応じてドロップダウン表示を切り替える。

用途
ストアのヘッダーにデスクトップ版の階層付きナビゲーションを配置するときに使う。モバイルメニューと分けて、PC 閲覧時のメニュー表示に最適化。
設置場所
snippets/navbar-desktop-menu.liquid に配置し、ヘッダーセクション内で `{% render 'navbar-desktop-menu', block: block %}` で呼び出す。block.settings.main_menu に Shopify 管理画面で作成したリンクリストハンドルを指定。
注意点
block.settings にメインメニュー選択フィールドが定義されている必要があり、テーマ設定で該当するリンクリストが作成されていることが前提。Bootstrap の data-bs-toggle="dropdown" に依存しているため、Bootstrap JavaScript ライブラリをロードしておく。サブメニューの区切り線は '-' というリンク題名で実装されているので、実際の URL リンクで '-' という文字列は使えない。ドロップダウンが画面外に出ないよう CSS で position や max-height を調整する。
タグ:navigationmenulinklistsdropdownbootstrapheader

コード

40 行 / liquid
<ul class="nav-desktop-menu nav justify-content-center">
  {% for link in linklists[block.settings.main_menu].links %}
    <li class="nav-item {% if link.links %}dropdown{% endif %}">
      {% if link.links == blank %}
        <a
          class="nav-link {% if link.active %}active{% endif %}" 
          href="{{ link.url }}"
          aria-current="{% if link.active %}page{% endif %}">
          {{ link.title }}
        </a>
      {% else %}
        <a 
          class="nav-link dropdown-toggle {% if link.child_active %}active{% endif %}" 
          href="#"
          data-bs-toggle="dropdown" 
          data-bs-display="static"
          aria-expanded="false"
          role="button">
          {{ link.title }}
        </a>
        <ul class="dropdown-menu">
          {% for child_link in link.links %}
            <li>
              {% if child_link.title == '-' %}
                <hr class="dropdown-divider">
              {% else %}
                <a 
                  class="dropdown-item {% if child_link.active %}active{% endif %}" 
                  href="{{ child_link.url }}"
                  aria-current="{% if child_link.active %}page{% endif %}">
                  {{ child_link.title }}
                </a>
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </li>
  {% endfor %}
</ul>

出典・ライセンス

License:
MIT

このコードは kondasoft 著作の MIT ライセンスソースです。 原本の著作権は kondasoft が保有します。日本語訳は ALSEL によるものです。

関連項目

🧭 ヘッダー/フッター/ナビゲーション中級

Alpine.js統合のメニュー開閉

Alpine.js の @click ディレクティブと :class バインディングを使ったメニュー開閉コンポーネント。ボタンクリックで open 状態を切り替え、ul 要素に expanded クラスを条件付きで付与する。

📁 theme-tools·MIT·5
🧭 ヘッダー/フッター/ナビゲーション初級

ヘッダーのレイアウト構造

Web Component のカスタムエレメント `<c-header>` でラップしたヘッダー要素。Tailwind CSS のユーティリティクラスを使い、レスポンシブなパディングとフレックスボックスレイアウトを実装している。

📁 theme-tools·MIT·14
🧭 ヘッダー/フッター/ナビゲーション初級

ナビゲーションバーのロゴ

ストアのロゴをナビゲーションバーに表示し、クリックでホームページに戻るコンポーネント。ロゴ画像がない場合はストア名をテキストで表示する。

📁 ks-bootshop·MIT·18
🧭 ヘッダー/フッター/ナビゲーション初級

決済方法アイコン

ストアで有効な決済手段のアイコンをリスト表示するスニペット。Shopify が提供する `payment_type_svg_tag` フィルタを使い、クレジットカード・Apple Pay・Google Pay などのロゴを自動的に描画する。

📁 ks-bootshop·MIT·18
🧭 ヘッダー/フッター/ナビゲーション初級

グローバルナビゲーションメニュー

Shopify 管理画面の「メインメニュー」リンクリストをループし、トップレベルメニュー + 1階層のサブメニューを描画するスニペット。link.title と sub_link.title を escape フィルターでエスケープして XSS 対策を施している。

📁 shopify-theme-lab·MIT·19
🧭 ヘッダー/フッター/ナビゲーション初級

フッター

ストア共通のフッターセクション。管理画面で設定したフッターメニュー(リンクリスト)をループ表示し、著作権表記を出す。

📁 shopify-theme-lab·MIT·25