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>