x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-skew">
<li><a href="#" type="button" class="btn btn-primary btn-sm rounded-0 rounded-start-2">
<div>Home</div>
</a></li>
<li><a href="#" type="button" class="btn btn-primary btn-sm rounded-0 mx-1">
<div>Library</div>
</a></li>
<li><a href="#" type="button" class="btn btn-primary btn-sm rounded-0 rounded-end-2 active" aria-current="page">
<div>Data</div>
</a></li>
</ol>
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-skew">
<li><a href="#" type="button" class="btn btn-primary btn-sm rounded-0 rounded-start-2"><div>Home</div></a></li>
<li><a href="#" type="button" class="btn btn-primary btn-sm rounded-0 mx-1"><div>Library</div></a></li>
<li><a href="#" type="button" class="btn btn-primary btn-sm rounded-0 rounded-end-2 active" aria-current="page"><div>Data</div></a></li>
</ol>
</nav>

_breadcrumbs.scss

1
2
3
4
5
6
7
8
9
.breadcrumb-skew {
a {
transform: skew(-20deg);
* {
transform: skew(20deg);
}
}
}

No assets to display.