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

11k

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.8k
Breadcrumbs

Author:
Sophia Baker

2 years ago

9.8k
Breadcrumbs
Basic navigation trail with SVG icon

Author:
Anja Müller

1 year ago

7.8k
Breadcrumb

Author:
Gopi Yadav

2 years ago

9.6k
Gradient Breadcrumb
Breadcrumb. Gradient background. Gradient text on hover. Based on gopi/breadcrumb-2.

Author:
Nick Girga

1 month ago

342
home
search home

Author:
Uwera Dorcas

3 weeks ago

100
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 weeks ago

130
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."

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 weeks ago

306
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.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

122
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.

Author:
KULDEEP

2 days ago

37
Breadcrumb
minimal modern breadcrumb design

Author:
OmKar Mehta

1 year ago

1.9k
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)

Author:
Ayyamperumal S

1 month ago

365

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components