Stylebook

Breadcrumbs

- Byty
- Domy
- Pozemky
- Zahraniční
- Poslední položka

        {% include "@Components/breadcrumbs/breadcrumbs.twig" with {props: {
    items: [
      {
        title: "Byty",
        url: "#"
      }, {
        title: "Domy",
        url: "#"
      }, {
        title: "Pozemky",
        url: "#"
      }, {
        title: "Zahraniční",
        url: "#"
      }
    ],
    last_item: {
      title: "Poslední položka"
    }
  }
} %}

          <ul class="breadcrumbs">
                        <li class="breadcrumbs__item">
                <span class="breadcrumbs__item-icon d-flex align-items-center justify-content-center">
                    <img src="images/svg/chevron-right.svg" alt=">" loading="lazy">
                </span>
                <a href="#" class="text-decoration-none">Byty</a>
            </li>
                    <li class="breadcrumbs__item">
                <span class="breadcrumbs__item-icon d-flex align-items-center justify-content-center">
                    <img src="images/svg/chevron-right.svg" alt=">" loading="lazy">
                </span>
                <a href="#" class="text-decoration-none">Domy</a>
            </li>
                    <li class="breadcrumbs__item">
                <span class="breadcrumbs__item-icon d-flex align-items-center justify-content-center">
                    <img src="images/svg/chevron-right.svg" alt=">" loading="lazy">
                </span>
                <a href="#" class="text-decoration-none">Pozemky</a>
            </li>
                    <li class="breadcrumbs__item">
                <span class="breadcrumbs__item-icon d-flex align-items-center justify-content-center">
                    <img src="images/svg/chevron-right.svg" alt=">" loading="lazy">
                </span>
                <a href="#" class="text-decoration-none">Zahraniční</a>
            </li>
                <li class="breadcrumbs__item --last">
        <span class="breadcrumbs__item-icon d-flex align-items-center justify-content-center">
            <img src="images/svg/chevron-right.svg" alt=">" width="12" height="12" loading="lazy">
        </span>
        <span>Poslední položka</span>
    </li>
    <li class="breadcrumbs__dropdown align-items-center justify-content-center">
        <span class="icon">
      <img src="images/svg/arrow-down-white.svg" alt="&darr;" loading="lazy">
  
  </span>
    </li>
</ul>

Schema

    {
  "props": {
    "items": {
      "type": "array of object",
      "title": {
        "type": "string",
        "description": "Title of link"
      },
      "url": {
        "type": "string",
        "description": "Url of link"
      }
    },
    "last_item": {
      "title": {
        "type": "string",
        "description": "Title of link"
      }
    }
  }
}