LTR RTL Fancy Breadcrumb

Navbar Bootstrap 5Free+ CSS

LTR RTL Fancy Breadcrumb: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.

1.6k views28 downloads3 years ago

gosnippets.com/preview/ltr-rtl-fancy-breadcrumb

Source Code

1<div dir="ltr">
2     <nav aria-label="breadcrumb">
3                        <ol class="default-breadcrumb">
4                            <li class="crumb">
5                              <div class="link"><a href="#" class="fa fa-home"></a></div>
6                            </li>
7                            <li class="crumb">
8                              <div class="link"><a href="#">Categories</a></div>
9                            </li>
10                            <li class="crumb">
11                              <div class="link"><a href="#">Products</a></div>
12                            </li>
13                            <li class="crumb">
14                              <div class="link"><a href="#">Navigation</a></div>
15                            </li>
16                            <li class="crumb active">
17                                <div class="link"><span aria-current="location">Breadcrumbs Last Item Is Too Long</span></div>
18                            </li>
19                        </ol>
20        </nav>
21</div>
22
23<div dir="rtl">
24     <nav aria-label="breadcrumb">
25                        <ol class="default-breadcrumb">
26                            <li class="crumb">
27                              <div class="link"><a href="#" class="fa fa-home"></a></div>
28                            </li>
29                            <li class="crumb">
30                              <div class="link"><a href="#">Categories</a></div>
31                            </li>
32                            <li class="crumb">
33                              <div class="link"><a href="#">Products</a></div>
34                            </li>
35                            <li class="crumb">
36                              <div class="link"><a href="#">Navigation</a></div>
37                            </li>
38                            <li class="crumb active">
39                                <div class="link"><span aria-current="location">Breadcrumbs Last Item Is Too Long</span></div>
40                            </li>
41                        </ol>
42                    </nav>
43</div>

More Navbar snippets

Responsive Sidebar Navigation for Dashboard

Responsive Sidebar Navigation for Dashboard: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.

NavbarView →

Bootstrap Transparent navbar example

Bootstrap Transparent navbar example — a free Bootstrap 5 navbar snippet. Copy the HTML, CSS & JS and paste straight into your Bootstrap 5 project.

NavbarView →

Bootstrap 5 e-commerce navigation with product snippet

Bootstrap 5 e-commerce navigation with product snippet: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.

NavbarView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div dir="ltr"> 2 <nav aria-label="breadcrumb"> 3 <ol class="default-breadcrumb"> 4 <li class="crumb"> 5 <div class="link"><a href="#" class="fa fa-home"></a></div> 6 </li> 7 <li class="crumb"> 8 <div class="link"><a href="#">Categories</a></div> 9 </li> 10 <li class="crumb"> 11 <div class="link"><a href="#">Products</a></div> 12 </li> 13 <li class="crumb"> 14 <div class="link"><a href="#">Navigation</a></div> 15 </li> 16 <li class="crumb active"> 17 <div class="link"><span aria-current="location">Breadcrumbs Last Item Is Too Long</span></div> 18 </li> 19 </ol> 20 </nav> 21</div> 22 23<div dir="rtl"> 24 <nav aria-label="breadcrumb"> 25 <ol class="default-breadcrumb"> 26 <li class="crumb"> 27 <div class="link"><a href="#" class="fa fa-home"></a></div> 28 </li> 29 <li class="crumb"> 30 <div class="link"><a href="#">Categories</a></div> 31 </li> 32 <li class="crumb"> 33 <div class="link"><a href="#">Products</a></div> 34 </li> 35 <li class="crumb"> 36 <div class="link"><a href="#">Navigation</a></div> 37 </li> 38 <li class="crumb active"> 39 <div class="link"><span aria-current="location">Breadcrumbs Last Item Is Too Long</span></div> 40 </li> 41 </ol> 42 </nav> 43</div>