### Select Language

### Activity

- Team
- Projects
- Schedule

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Components Hub
- Avatars
- Accordions
  - Accordion
  - Collapse
  - Image Accordion
- Breadcrumb
- Calendar
- Dropdown
- Icon Box
- Loader
- Message
- Modal
- Progress
- Tabs
  - Regular Tabs
  - Slider Tabs
- Flex Table
  - Base Table
  - Compact Table
  - Media Table
  - Advanced Table
- Snacks
- Plugins
  - Alertify
  - Autocomplete
  - Datepicker
  - ChoicesJs
  - NoUI Slider
  - Filepond
  - Light Gallery
  - Video Gallery
  - Video Player
  - Toasts
  - WebUI Popover
- Rich Text
  - Summernote
  - Sun Editor

# Breadcrumb

Huro provides a breadcrumb component that you can use to enhance your navigation experience. Default breadcrumb items are seperated by a slash sign. You can use icons as well with breadcrumb items. See markup for more details about usage. You can also change the alignment by using the `is-centered` or `is-right` class on the `breadcrumb` element.

          <nav class="breadcrumb" aria-label="breadcrumbs">
              <ul>
                  <li>
                      <a href="#">
                          <span>Catalogue</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span>Computers</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span>Monitors</span>
                      </a>
                  </li>
              </ul>
          </nav>

          <nav class="breadcrumb" aria-label="breadcrumbs">
              <ul>
                  <li>
                      <a href="#">
                          <span class="icon is-small">
                              <i data-feather="shopping-cart"></i>
                          </span>
                          <span>Catalogue</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span class="icon is-small">
                              <i data-feather="cpu"></i>
                          </span>
                          <span>Computers</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span class="icon is-small">
                              <i data-feather="monitor"></i>
                          </span>
                          <span>Monitors</span>
                      </a>
                  </li>
              </ul>
          </nav>

### Arrow Separator

Breadcrumb items can be separated by alternative separators. To display arrow breadcrumb separators, add the `has-arrow-separator` class to the target `breadcrumb` element. See markup for more details.

          <nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
              <ul>
                  <li>
                      <a href="#">
                          <span>Catalogue</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span>Computers</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span>Monitors</span>
                      </a>
                  </li>
              </ul>
          </nav>

          <nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
              <ul>
                  <li>
                      <a href="#">
                          <span class="icon is-small">
                              <i data-feather="shopping-cart"></i>
                          </span>
                          <span>Catalogue</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span class="icon is-small">
                              <i data-feather="cpu"></i>
                          </span>
                          <span>Computers</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span class="icon is-small">
                              <i data-feather="monitor"></i>
                          </span>
                          <span>Monitors</span>
                      </a>
                  </li>
              </ul>
          </nav>

### Bullet Separator

Breadcrumb items can be separated by alternative separators. To display bullet breadcrumb separators, add the `has-bullet-separator` class to the target `breadcrumb` element. See markup for more details.

          <nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
              <ul>
                  <li>
                      <a href="#">
                          <span>Catalogue</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span>Computers</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span>Monitors</span>
                      </a>
                  </li>
              </ul>
          </nav>

          <nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
              <ul>
                  <li>
                      <a href="#">
                          <span class="icon is-small">
                              <i data-feather="shopping-cart"></i>
                          </span>
                          <span>Catalogue</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span class="icon is-small">
                              <i data-feather="cpu"></i>
                          </span>
                          <span>Computers</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span class="icon is-small">
                              <i data-feather="monitor"></i>
                          </span>
                          <span>Monitors</span>
                      </a>
                  </li>
              </ul>
          </nav>

### Dot Separator

Breadcrumb items can be separated by alternative separators. To display dot breadcrumb separators, add the `has-dot-separator` class to the target `breadcrumb` element. See markup for more details.

          <nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
              <ul>
                  <li>
                      <a href="#">
                          <span>Catalogue</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span>Computers</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span>Monitors</span>
                      </a>
                  </li>
              </ul>
          </nav>

          <nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
              <ul>
                  <li>
                      <a href="#">
                          <span class="icon is-small">
                              <i data-feather="shopping-cart"></i>
                          </span>
                          <span>Catalogue</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span class="icon is-small">
                              <i data-feather="cpu"></i>
                          </span>
                          <span>Computers</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span class="icon is-small">
                              <i data-feather="monitor"></i>
                          </span>
                          <span>Monitors</span>
                      </a>
                  </li>
              </ul>
          </nav>

### Succeeds Separator

Breadcrumb items can be separated by alternative separators. To display succeeds breadcrumb separators, add the `has-succeeds-separator` class to the target `breadcrumb` element. See markup for more details.

          <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
              <ul>
                  <li>
                      <a href="#">
                          <span>Catalogue</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span>Computers</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span>Monitors</span>
                      </a>
                  </li>
              </ul>
          </nav>

          <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
              <ul>
                  <li>
                      <a href="#">
                          <span class="icon is-small">
                              <i data-feather="shopping-cart"></i>
                          </span>
                          <span>Catalogue</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span class="icon is-small">
                              <i data-feather="cpu"></i>
                          </span>
                          <span>Computers</span>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <span class="icon is-small">
                              <i data-feather="monitor"></i>
                          </span>
                          <span>Monitors</span>
                      </a>
                  </li>
              </ul>
          </nav>