Breadcrumb

Sources

PrestaShop UIKit

Original bootstrap component used in the PrestaShop UIKit:

 1<nav aria-label="breadcrumb">
 2  <ol class="breadcrumb">
 3    <li class="breadcrumb-item active" aria-current="page">Home</li>
 4  </ol>
 5</nav>
 6
 7<nav aria-label="breadcrumb">
 8  <ol class="breadcrumb">
 9    <li class="breadcrumb-item"><a href="#">Home</a></li>
10    <li class="breadcrumb-item active" aria-current="page">Library</li>
11  </ol>
12</nav>
13
14<nav aria-label="breadcrumb">
15  <ol class="breadcrumb">
16    <li class="breadcrumb-item"><a href="#">Home</a></li>
17    <li class="breadcrumb-item"><a href="#">Library</a></li>
18    <li class="breadcrumb-item active" aria-current="page">Data</li>
19  </ol>
20</nav>

PUIK

Basic Use

For any breadcrumb component that you use, replace the structure above with the following structure:

 1<nav class="puik-breadcrumb" role="navigation">
 2  <div class="puik-icon material-icons-round puik-breadcrumb__home-icon" style="font-size: 16px;">home</div>
 3  <div class="puik-breadcrumb__item">
 4    <a href="#" target="_self" class="puik-link puik-link--sm puik-breadcrumb__item-link">First link</a>
 5    <div class="puik-icon material-icons-round puik-breadcrumb__item-icon" style="font-size: 16px;">keyboard_arrow_right</div>
 6  </div>
 7  <div class="puik-breadcrumb__item">
 8    <a href="#" target="_self" class="puik-link puik-link--sm puik-breadcrumb__item-link">Second link</a>
 9    <div class="puik-icon material-icons-round puik-breadcrumb__item-icon" style="font-size: 16px;">keyboard_arrow_right</div>
10  </div>
11  <div class="puik-breadcrumb__item--last">Third link</div>
12</nav>
← Badge
Button →