概要

設定方法

{% unless request.path == routes.root_url %}
  {%- assign breadcrumb_items = "" -%}
  {%- for link in section.settings.menu.links -%}
  {%- assign breadcrumb_items = breadcrumb_items | append: "," | append: link.title | append: ":" | append: link.url -%}
      {%- if link.links != blank -%}
      {%- for childlink in link.links -%}
          {%- assign breadcrumb_items = breadcrumb_items | append: "," | append: link.title | append: ":" | append: link.url | append: "&" | append: childlink.title | append: ":" | append: childlink.url -%}
          {%- if childlink.links != blank -%}
          {%- for grandchildlink in childlink.links -%}
              {%- assign breadcrumb_items = breadcrumb_items | append: "," | append: link.title | append: ":" | append: link.url | append: "&" | append: childlink.title | append: ":" | append: childlink.url | append: "&" | append: grandchildlink.title | append: ":" | append: grandchildlink.url -%}
          {%- endfor -%}
          {%- endif -%}
      {%- endfor -%}
      {%- else -%}
      {%- endif -%}
  {%- endfor -%}
  {%- assign breadcrumb_items = breadcrumb_items | remove_first: "," | split: "," -%}

  {%- assign display_breadcrumbs = "" -%}
  {%- for breadcrumb_item in breadcrumb_items -%}
    {%- assign last_breadcrumb_url = breadcrumb_item | split: "&" | last | split: ":" | last -%}
    {%- if last_breadcrumb_url == request.path -%}
      {%- assign display_breadcrumbs = breadcrumb_item -%}
    {%- endif -%}
  {%- endfor -%}

  {%- unless display_breadcrumbs == "" -%}
  <div id="breadcrumb-wrapper" class="page-width">
    <ul class="breadcrumb">
      <li><a href="{{ routes.root_url }}">ホーム</a></li>
    {%- assign display_breadcrumbs_items = "" -%}
    {%- assign display_breadcrumbs = display_breadcrumbs | split: "&" -%}
    {%- for display_breadcrumb in display_breadcrumbs -%}
      {%- assign breadcrumb_title = display_breadcrumb | split: ":" | first -%}
      {%- assign breadcrumb_url = display_breadcrumb | split: ":" | last -%}
      {%- capture display_breadcrumbs_item_link -%}
        {%- if request.path == breadcrumb_url -%}
            <li>{{ breadcrumb_title }}</li>
        {%- else -%}
            <li><a href="{{ breadcrumb_url }}">{{ breadcrumb_title }}</a></li>
        {%- endif -%}
      {%- endcapture -%}
      {%- assign display_breadcrumbs_items = display_breadcrumbs_items | append: display_breadcrumbs_item_link -%}
    {%- endfor -%}
    {{display_breadcrumbs_items}}
    </ul>
  </div>
  <style>
      .mega-menu__content {
          z-index: 100;
      }
      #breadcrumb-wrapper {
        overflow-x: scroll;
      }
      .breadcrumb {
        list-style: none;
        padding: 2rem 0;
        margin: 0;
        display: flex;
        align-items: center;
        max-width: content-width;
      }
      
      .breadcrumb li {
        font-size: 16px;
        margin-right: 1rem;
        position: relative; /* 相対位置指定 */
        white-space: nowrap;
      }
      
      .breadcrumb li:not(:last-child)::after { /* 最後の要素以外にアローを付ける */
        content: '\2192'; /* アローのコードポイント */
        padding-left: 1rem;
        font-size: 12px;
      }
      
      .breadcrumb li:last-child {
        color: #333;
      }
      .breadcrumb li a  {
        color: #333;
      }
  </style>
  {%- endunless -%}
{%- endunless -%}