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

2 years ago

8.8k
Breadcrumb

Gopi Yadav

3 years ago

10.5k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

5 months ago

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

Indra

1 year ago

1k
background
A background is the area behind the content of an element (like a page, section, or div). It helps define the look and feel by adding colors, images, gradients, or patterns.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

3 months ago

227
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Ayyamperumal S

1 year ago

2.8k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

4 months ago

441
Breadcrum
Different styles of breadcrum component

Rajesh Maheshwari

1 year ago

1.4k
Breadcrumb
minimal modern breadcrumb design

OmKar Mehta

2 years ago

2.9k