Skip to content

Breadcrumbs13.10.5

On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages. They are also an effective visual aid that indicates the location of the user within the website's hierarchy, making it a great source of contextual information for landing pages.


$ npm i @if-design-system/breadcrumbs@13.10.5

Villa­försäkring

Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten.

  • Huskollen ingår
  • Nyvärde hemelektronik
  • Köp online - få 10% rabatt!
Edit this section

Usage

Villa­försäkring

Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten.

  • Huskollen ingår
  • Nyvärde hemelektronik
  • Köp online - få 10% rabatt!
Desktop
Mobile
Edit this section

Anatomy

Villa­försäkring

Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten.

  • Huskollen ingår
  • Nyvärde hemelektronik
  • Köp online - få 10% rabatt!
Desktop
  1. Path
  2. Current page

Villa­försäkring

Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten.

  • Huskollen ingår
  • Nyvärde hemelektronik
  • Köp online - få 10% rabatt!
Truncated levels 1
  1. The ellipsis indicates that there are several levels

Villa­försäkring

Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten.

  • Huskollen ingår
  • Nyvärde hemelektronik
  • Köp online - få 10% rabatt!
Truncated levels 2
  1. On click, the truncated levels are displayed, and the levels to the right is truncated

Villa­försäkring

Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten.

  • Huskollen ingår
  • Nyvärde hemelektronik
  • Köp online - få 10% rabatt!
Truncated levels 3 (optional)

If there is too many links to display on click, a menu component can be used to display the truncated paths.

  1. A menu with the truncated paths
Edit this section

Specs

Villa­försäkring

Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten.

  • Huskollen ingår
  • Nyvärde hemelektronik
  • Köp online - få 10% rabatt!
Edit this section

Implementation

<section class="if hero">
  <div class="if container">
    <ol class="if breadcrumbs">
      <li class="if">
        <a class="if" href="/asds" title="If privat">If privat</a>
      </li>
      <li class="if">
        <a class="if" href="/asds" title="Försäkringar">Försäkringar</a>
      </li>
      <li class="if">
        <a class="if" href="/asds" title="Hemförsäkring">Hemförsäkring</a>
      </li>
      <li class="if">
        <a class="if" href="/asds" title="Villaförsäkring">Villaförsäkring</a>
      </li>
    </ol>
    <div class="if content"></div>
    <div class="if image studio"></div>
  </div>
</section>
Edit this section

Contact us