Select Language

Activity

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

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>