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="icon  --sm">
  <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
    <path fill="currentColor" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"></path>
</svg>
  </span>
        <a class="link --black" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Byty</span>
  </span>

  </a>
      </li>
          <li class="breadcrumbs__item">
        <span class="icon  --sm">
  <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
    <path fill="currentColor" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"></path>
</svg>
  </span>
        <a class="link --black" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Domy</span>
  </span>

  </a>
      </li>
          <li class="breadcrumbs__item">
        <span class="icon  --sm">
  <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
    <path fill="currentColor" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"></path>
</svg>
  </span>
        <a class="link --black" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Pozemky</span>
  </span>

  </a>
      </li>
          <li class="breadcrumbs__item">
        <span class="icon  --sm">
  <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
    <path fill="currentColor" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"></path>
</svg>
  </span>
        <a class="link --black" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">Zahraniční</span>
  </span>

  </a>
      </li>
        <li class="breadcrumbs__item --last">
    <span class="icon  --sm">
  <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
    <path fill="currentColor" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"></path>
</svg>
  </span>
    <span>Poslední položka</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"
      }
    }
  }
}