Home
Samuel Dawson
Breadcrumb with icon

Breadcrumb with icon

This tailwind example is contributed by Samuel Dawson, on 19-Feb-2023. Component is made with Tailwind CSS v3. It is responsive.

Breadcrumb

Author Samuel Dawson

10.8k

Fork Fullscreen

<nav aria-label="breadcrumb">
    <ul class="flex flex-wrap space-x-3 text-sm font-medium">
        <li class="flex items-center space-x-3">
            <a href="#" class="flex items-center space-x-1 text-gray-800">
                <svg class="h-4 w-4 shrink-0 fill-gray-500" aria-hidden="true" viewBox="0 0 256 256">
                    <path
                        d="M184 32H72A16 16 0 0056 48V224a8.1 8.1.0 004.1 7 7.6 7.6.0 003.9 1 7.9 7.9.0 004.2-1.2L128 193.4l59.7 37.4a8.3 8.3.0 008.2.2 8.1 8.1.0 004.1-7V48A16 16 0 00184 32z">
                    </path>
                </svg>
                <span>Dashboard</span>
            </a>
        </li>
        <li class="flex items-center space-x-3">
            <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-gray-300"></div>
            <a href="#" class="flex items-center space-x-1 text-gray-800">
                <svg class="h-4 w-4 shrink-0 fill-gray-500" aria-hidden="true" viewBox="0 0 256 256">
                    <path
                        d="M2e2 32H163.7a47.8 47.8.0 00-71.4.0H56A16 16 0 0040 48V216a16 16 0 0016 16H2e2a16 16 0 0016-16V48A16 16 0 002e2 32zm-72 0a32.1 32.1.0 0132 32H96a32.1 32.1.0 0132-32z">
                    </path>
                </svg>
                <span>Reports</span>
            </a>
        </li>
        <li class="flex items-center space-x-3" aria-current="page">
            <div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-gray-300"></div>

<span class="flex items-center space-x-1">
                <svg class="h-4 w-4 shrink-0 fill-gray-400" aria-hidden="true" viewBox="0 0 256 256">
                    <path
                        d="M136 88H120V35.3L91.7 63.6A8 8 0 0180.3 52.3l42-42a8.1 8.1.0 0111.4.0l42 42a8 8 0 010 11.3 8 8 0 01-11.4.0L136 35.3zm64 0H136v40a8 8 0 01-16 0V88H56a16 16 0 00-16 16V208a16 16 0 0016 16H2e2a16 16 0 0016-16V104A16 16 0 002e2 88z">
                    </path>
                </svg>
                <span class="text-gray-400">Export</span>
            </span>
        </li>
    </ul>
</nav>

Related Examples

Breadcrumb

Author:
Ron Hicks

2 years ago

9.7k
Breadcrumbs

Author:
Sophia Baker

2 years ago

9.5k
Breadcrumbs
Basic navigation trail with SVG icon

Author:
Anja Müller

1 year ago

7.2k
Breadcrumb

Author:
Gopi Yadav

2 years ago

9.1k
Breadcrumb
minimal modern breadcrumb design

Author:
OmKar Mehta

11 months ago

1.3k
Simple Breadcrumb Example
Simple Breadcrumb Example with Light and black background options.

Author:
Sedat Kumcu

4 months ago

830
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

1 month ago

338
Simple Breadcrumbs
simple yet modern breadcrumbs UI

Author:
EliteAI Tools

2 months ago

343
Default breadcrumb
Use the following breadcrumb example to show the hierarchical structure of pages

Author:
Md. Tofayel islam

11 months ago

2.3k
Breadcrum
Different styles of breadcrum component

Author:
Rajesh Maheshwari

1 week ago

15
Breadcrumb

Author:
Rajesh Maheshwari

1 week ago

55
Breadcrumbs

Author:
Prajwal Hallale

2 years ago

8.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components