mirror of https://github.com/twbs/bootstrap.git
34 lines
1.1 KiB
Markdown
34 lines
1.1 KiB
Markdown
---
|
|
layout: docs
|
|
title: Breadcrumb
|
|
group: components
|
|
---
|
|
|
|
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).
|
|
|
|
Works fine with or without the usage of list markup.
|
|
|
|
{% example html %}
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item active">Home</li>
|
|
</ol>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
<li class="breadcrumb-item active">Library</li>
|
|
</ol>
|
|
<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">Data</li>
|
|
</ol>
|
|
<!-- Or use a div instead of a list -->
|
|
<div class="breadcrumb">
|
|
<a class="breadcrumb-item" href="#">Home</a>
|
|
<a class="breadcrumb-item" href="#">Library</a>
|
|
<a class="breadcrumb-item" href="#">Data</a>
|
|
<span class="breadcrumb-item active">Bootstrap</span>
|
|
</div>
|
|
{% endexample %}
|