Breadcrumb with icon

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

Breadcrumb

Author Samuel Dawson

Tailwind v3.4 11.9k 6

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

Ron Hicks

4 years ago

11.5k
Breadcrumbs

Sophia Baker

3 years ago

11.1k
Breadcrumbs
Basic navigation trail with SVG icon

Anja Müller

3 years ago

8.8k
Breadcrumb

Gopi Yadav

4 years ago

10.7k
Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.1k
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.9k
Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Skywings
used in traveling flight

INGRIDE MUZIRANENGE

11 months ago

1.2k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

KULDEEP

1 year ago

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

Md. Tofayel islam

2 years ago

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

Sedat Kumcu

2 years ago

2.8k
Simple Breadcrumbs
simple yet modern breadcrumbs UI

EliteAI Tools

1 year ago

1.8k