]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | --- |
2 | layout: docs | |
3 | title: Breadcrumb | |
4 | description: Indicate the current page's location within a navigational hierarchy. | |
5 | group: components | |
6 | --- | |
7 | ||
8 | Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). | |
9 | ||
10 | {% example html %} | |
11 | <ol class="breadcrumb"> | |
12 | <li class="breadcrumb-item active">Home</li> | |
13 | </ol> | |
14 | <ol class="breadcrumb"> | |
15 | <li class="breadcrumb-item"><a href="#">Home</a></li> | |
16 | <li class="breadcrumb-item active">Library</li> | |
17 | </ol> | |
18 | <ol class="breadcrumb"> | |
19 | <li class="breadcrumb-item"><a href="#">Home</a></li> | |
20 | <li class="breadcrumb-item"><a href="#">Library</a></li> | |
21 | <li class="breadcrumb-item active">Data</li> | |
22 | </ol> | |
23 | {% endexample %} | |
24 | ||
25 | Similar to our navigation components, breadcrumbs work fine with or without the usage of list markup. | |
26 | ||
27 | {% example html %} | |
28 | <nav class="breadcrumb"> | |
29 | <a class="breadcrumb-item" href="#">Home</a> | |
30 | <a class="breadcrumb-item" href="#">Library</a> | |
31 | <a class="breadcrumb-item" href="#">Data</a> | |
32 | <span class="breadcrumb-item active">Bootstrap</span> | |
33 | </nav> | |
34 | {% endexample %} |