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

11k
Breadcrumbs
Basic navigation trail with SVG icon

Anja Müller

3 years ago

8.8k
Breadcrumb

Gopi Yadav

4 years ago

10.7k
Breadcrumb

Rajesh Maheshwari

1 year ago

1.6k
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,ASTER
love my projuct

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Indra

1 year ago

1k
Acode master
Acode master(=>good work for Acode master)

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
TailwindFlex – Creative Animated Home Experience
"Innovative Home with Tailwind Animated Background" "Animated Hero – TailwindFlex Design" "Smooth UI – Creative Motion with Tailwind CSS" "Home Harmony – Motion Meets Design" "TailwindFlex Home – Fluid Animation & UI"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
Personal Portfolio Website
Nziza HAMZY 😎! Reka dukore full TailwindCSS Portfolio yuzuye na: Hero Section About Section Projects Section (cards) Contact Form Animations & hover effects Fully responsive for mobile

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

5 months ago

535