🧭 ヘッダー/フッター/ナビゲーション中級
グローバルナビゲーション
デスクトップ・モバイル兼用のナビゲーションバー。ロゴ、メニュー、検索、カート、アカウントアイコンを表示し、背景色、境界線、シャドウなどを管理画面で調整できる。
用途
ストア全ページに共通するヘッダーとして機能。モバイルではハンバーガーメニュー、デスクトップでは横並びナビゲーションを自動切り替えする。
設置場所
sections/navbar.liquid に配置し、theme.liquid の <body> 直下で {% section 'navbar' %} で呼び出す。モバイル・デスクトップ双方のナビゲーションが自動で出し分けられる。
注意点
モバイルメニューが正常に動作するには、offcanvas-menu スニペットと navbar-logo、navbar-desktop-menu、navbar-desktop-icons スニペットが別途必要。ロゴは mobile / desktop 両方のブロック設定で独立して指定し、異なるサイズに対応させることを推奨。background opacity と border opacity は CSS カスタムプロパティ(`--bs-bg-opacity`、`--bs-border-opacity`)で管理されるため、テーマの Bootstrap 実装版に依存する。
コード
367 行 / liquid<navbar-wrapper
id="navbar-wrapper"
class="
{{ section.settings.bg_color }}
{{ section.settings.bg_gradient }}
{{ section.settings.text_color }}
{{ section.settings.border_top_width | prepend: 'border-top-' }}
{{ section.settings.border_bottom_width | prepend: 'border-bottom-' }}
{{ section.settings.border_color }}
{{ section.settings.shadow }}
"
style="
--bs-bg-opacity: {{ section.settings.bg_opacity | append: '%' }};
--bs-border-opacity: {{ section.settings.border_opacity | append: '%' }};
">
{% for block in section.blocks %}
{% if block.type == 'mobile' %}
<nav
id="navbar-mobile"
class="navbar d-desktop-none p-0"
{{ block.shopify_attributes }}>
<div
class="container d-block {{ block.settings.pt | prepend: 'pt-' }} {{ block.settings.pb | prepend: 'pb-' }}"
style="max-width: {{ block.settings.container_max_width | append: 'px' }};">
<div class="row align-items-center">
<div class="col-5">
<ul class="nav flex-nowrap">
<li class="nav-item">
<a
class="nav-link nav-link-icon ms-n3"
href="#offcanvas-menu"
data-bs-toggle="offcanvas"
aria-controls="offcanvas-menu"
aria-label="{{ 'general.accessibility.menu' | t }}"
role="button">
{% render 'svg-icons', icon: 'menu' %}
</a>
</li>
{% if shop.customer_accounts_enabled %}
<li class="nav-item">
<a
class="nav-link nav-link-icon {% if template.name == 'login' or template.name == 'account' %}active{% endif %}"
aria-current="{% if template.name == 'login' or template.name == 'account' %}page{% endif %}"
href="{{ routes.account_url }}"
aria-label="{{ 'general.accessibility.account' | t }}">
{% render 'svg-icons', icon: 'account' %}
</a>
</li>
{% endif %}
</ul>
</div>
<div class="col-8 text-center">
{% render 'navbar-logo', block: block %}
</div>
<div class="col-5">
<ul class="nav flex-nowrap justify-content-end">
{% if settings.search %}
<li class="nav-item">
<a
class="nav-link nav-link-icon"
href="#offcanvas-search"
data-bs-toggle="offcanvas"
aria-controls="offcanvas-search"
aria-label="{{ 'general.accessibility.search' | t }}"
role="button">
{% render 'svg-icons', icon: 'search' %}
</a>
</li>
{% endif %}
<li class="nav-item">
<a
class="nav-link nav-link-icon me-n3"
href="#offcanvas-cart"
data-bs-toggle="offcanvas"
aria-controls="offcanvas-cart"
aria-label="{{ 'general.accessibility.cart' | t }} {{ cart.item_count }}"
role="button">
{% render 'svg-icons', icon: 'cart' %}
{% render 'cart-count-badge' %}
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
{% else %}
<nav
id="navbar-desktop"
class="navbar d-none d-desktop-block p-0"
{{ block.shopify_attributes }}>
<div
class="container d-block {{ block.settings.pt | prepend: 'pt-' }} {{ block.settings.pb | prepend: 'pb-' }}"
style="max-width: {{ block.settings.container_max_width | append: 'px' }};">
<div
class="row align-items-center flex-grow-1">
<div class="col-4">
{% render 'navbar-logo', block: block %}
</div>
<div class="col-10">
{% render 'navbar-desktop-menu', block: block %}
</div>
<div class="col-4">
{% render 'navbar-desktop-icons', block: block %}
</div>
</div>
</div>
</nav>
{% endif %}
{% endfor %}
</navbar-wrapper>
{% for block in section.blocks %}
{% if block.type == 'mobile' %}
{% render 'offcanvas-menu', block: block %}
{% endif %}
{% endfor %}
{% schema %}
{
"name": "Navbar",
"limit": 1,
"settings": [
{
"type": "header",
"content": "Styling"
},
{
"type": "select",
"id": "bg_color",
"label": "Background color",
"default": "bg-body",
"options": [
{ "value": "bg-primary", "label": "Primary" },
{ "value": "bg-secondary", "label": "Secondary" },
{ "value": "bg-body", "label": "Body" },
{ "value": "bg-white", "label": "White" }
]
},
{
"type": "range",
"id": "bg_opacity",
"label": "Background opacity",
"min": 0,
"max": 100,
"step": 1,
"default": 100,
"unit": "%"
},
{
"type": "select",
"id": "bg_gradient",
"label": "Background gradient",
"options": [
{ "value": "bg-gradient", "label": "Yes" },
{ "value": "", "label": "No" }
],
"default": ""
},
{
"type": "select",
"id": "text_color",
"label": "Text color",
"default": "text-body",
"options": [
{ "value": "text-primary", "label": "Primary" },
{ "value": "text-secondary", "label": "Secondary" },
{ "value": "text-body", "label": "Body" },
{ "value": "text-white", "label": "White" }
]
},
{
"type": "range",
"id": "border_top_width",
"label": "Border top width",
"default": 0,
"min": 0,
"max": 16,
"step": 1,
"unit": "px"
},
{
"type": "range",
"id": "border_bottom_width",
"label": "Border bottom width",
"default": 0,
"min": 0,
"max": 16,
"step": 1,
"unit": "px"
},
{
"type": "select",
"id": "border_color",
"label": "Border color",
"default": "border-body",
"options": [
{ "value": "border-primary", "label": "Primary" },
{ "value": "border-secondary", "label": "Secondary" },
{ "value": "border-body", "label": "Body" },
{ "value": "border-white", "label": "White" }
]
},
{
"type": "range",
"id": "border_opacity",
"label": "Border opacity",
"min": 0,
"max": 100,
"step": 1,
"default": 100,
"unit": "%"
},
{
"type": "select",
"id": "shadow",
"label": "Shadow",
"options": [
{ "value": "shadow-sm", "label": "Yes" },
{ "value": "", "label": "No" }
],
"default": "shadow-sm"
}
],
"blocks": [
{
"type": "mobile",
"name": "Mobile",
"limit": 1,
"settings": [
{
"type": "text",
"id": "container_max_width",
"label": "Container max-width (px)",
"info": "Leave empty to use the global container width"
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo"
},
{
"type": "image_picker",
"id": "logo_transparent",
"label": "Logo - transparent bg",
"info": "NOTE: This feature is supported only in our Premium Shopify Themes. [Browse premium themes](https://www.kondasoft.com/collections/shopify-themes)"
},
{
"type": "range",
"id": "logo_height",
"label": "Logo height",
"min": 20,
"max": 100,
"step": 2,
"default": 40
},
{
"type": "link_list",
"id": "main_menu",
"label": "Main menu",
"default": "main-menu"
},
{
"type": "link_list",
"id": "collections_menu",
"label": "Collections Menu",
"info": "NOTE: This feature is supported only in our Premium Shopify Themes. [Browse premium themes](https://www.kondasoft.com/collections/shopify-themes)"
},
{
"type": "checkbox",
"id": "social_icons",
"label": "Show social icons",
"default": true
},
{
"type": "header",
"content": "Spacing"
},
{
"type": "range",
"id": "pt",
"label": "Top",
"min": 0,
"max": 20,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "pb",
"label": "Bottom",
"min": 0,
"max": 20,
"step": 1,
"default": 3
}
]
},
{
"type": "desktop",
"name": "Desktop",
"limit": 1,
"settings": [
{
"type": "text",
"id": "container_max_width",
"label": "Container max-width (px)",
"info": "Leave empty to use the global container width"
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo"
},
{
"type": "image_picker",
"id": "logo_transparent",
"label": "Logo - transparent bg",
"info": "NOTE: This feature is supported only in our Premium Shopify Themes. [Browse premium themes](https://www.kondasoft.com/collections/shopify-themes)"
},
{
"type": "range",
"id": "logo_height",
"label": "Logo height",
"min": 20,
"max": 100,
"step": 2,
"default": 40
},
{
"type": "link_list",
"id": "main_menu",
"label": "Main menu",
"default": "main-menu"
},
{
"type": "header",
"content": "Spacing"
},
{
"type": "range",
"id": "pt",
"label": "Top",
"min": 0,
"max": 20,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "pb",
"label": "Bottom",
"min": 0,
"max": 20,
"step": 1,
"default": 3
}
]
}
],
"presets": [
{
"name": "Navbar"
}
]
}
{% endschema %}出典・ライセンス
- Repository:
- https://github.com/kondasoft/ks-bootshop
- 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 行