# Breadcrumb

### [Interactive demo](https://vision.crimsonlogic.studio/jds/v1.2/components.html#breadcrumb-wrapper)

<div align="left"><img src="https://2758270529-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVPzFJV0KiMDuBMGmVD%2F-MZMVUiQkpQT5cCfxjXg%2F-MZMVr0Z4u1xX0rdGmkM%2Fimage.png?alt=media&#x26;token=27089154-8519-4ebf-82ce-7eb693b984e2" alt=""></div>

```
<nav aria-label="Full path to the current page">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Application Center</a></li>
            <li class="breadcrumb-item"><a href="#">Application List</a></li>
            <li class="breadcrumb-item active" aria-current="page">An Application</li>
          </ol>
        </nav>
<!--Breadcrumb with icon-->
<nav aria-label="Full path to the current page">
          <ol class="breadcrumb has-icon">
            <li class="breadcrumb-item"><a href="#"><i class="fal fa-home"></i><span class="sr-only">Home</span></a></li>
            <li class="breadcrumb-item"><a href="#"><i class="fal fa-list-alt"></i>Application Center</a></li>
            <li class="breadcrumb-item"><a href="#"><i class="fal fa-list-alt"></i>Application List</a></li>
            <li class="breadcrumb-item active" aria-current="page">An Application</li>
          </ol>
</nav>
```
