• Index
  • Core
    • button
    • link
    • base-header
    • base-section
    • img
    • icon
    • swiper-arrows
    • splide-arrows
    • cta-button
    • tooltip
    • badge
    • pagination-arrow
    • pagination
    • splide-arrows
    • footer-social
    • footer-column
    • footer
    • share
    • share-button
    • overview-button
    • energy-label
    • breadcrumbs
    • side-menu
    • modal
    • review-feedback
    • feedback
  • Sections
    • category-cards-section
    • real-estate-section
    • dev-project-slide-section
    • re-agency-description-section
    • re-agency-detail-branches-section
    • usp-section
    • link-navigation-section
    • posts-slide-section
    • dev-project-slide-section
    • filter-table-section
    • highlited-broker-section
    • broker-detail-section
    • real-estate-agency-header-section
    • real-estate-agency-content-section
    • base-section-side-menu
    • estates-slide-section
    • re-agency-form-section
    • map-section
    • broker-review-slide-section
    • estate-detail-content-section
    • category-nav-section
    • usp-base-section
    • post-detail-section
    • re-agents-section
    • posts-section
    • estates-content-section
    • estate-info-section
    • estate-detail-intro-section
  • Items
    • category-card-item
    • statistical-item
    • usp-item
    • overview-item
    • dev-project-slide-item
    • count-item
    • star-item
    • rating-item
    • broker-meta-item
    • highlighted-broker-item
    • post-slide-item
    • more-posts-item
    • broker-chart-item
    • contact-item
    • pagination-item
    • estate-slide-item
    • branch-item
    • broker-review-item
    • review-chart-item
    • broker-review-response-item
    • social-link-item
    • re-agents-item
    • estate-item
    • info-item
    • estate-detail-intro-item
  • Forms
    • input-field
    • search-field
    • radio
    • radio-fieldset
    • checkbox
    • checkbox-fieldset
    • switch
    • dropdown
    • textarea
    • option-switch
  • Subsections
    • current-info-subsection

Breadcrumbs

  • Preview
  • Twig
  • Html
    • 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"
      }
    }
  }
}