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>
No notes provided.
No params configured.
_breadcrumbs.scss
1
2
3
4
5
6
7
8
9
.breadcrumb-skew { a { transform: skew(-20deg); * { transform: skew(20deg); } }}
No assets to display.