Home
Prajwal Hallale
Breadcrumbs

Breadcrumbs

This tailwind example is contributed by Prajwal Hallale, on 27-Jan-2023. Component is made with Tailwind CSS v3. It is responsive.

Breadcrumb

Author Prajwal Hallale

8.5k

Fork Fullscreen

<nav class="flex mt-1">
    <ol class="flex flex-wrap text-xs">
        <li class="inline-flex items-center">
            <a href="#" class="inline-flex items-center font-medium text-gray-700 hover:text-gray-900">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z">
                    </path>
                </svg>
            </a>
        </li>
        <li>
            <div class="flex items-center">
                <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                        clip-rule="evenodd">
                    </path>
                </svg>
                <a href="#"
                    class="flex font-medium text-gray-700 hover:text-gray-900">Biomedical Engineering
                </a>
            </div>
        </li>
        <li>
            <div class="flex items-center">
                <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                        clip-rule="evenodd">
                    </path>
                </svg>
                <a href="#"
                    class="flex font-medium text-gray-700 hover:text-gray-900">Basic of Biomedical Instruments
                </a>
            </div>
        </li>
        <li aria-current="page">
            <div class="flex items-center">
                <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                        clip-rule="evenodd"></path>
                </svg>
                <span class="font-medium text-gray-500">Set 2</span>
            </div>
        </li>
    </ol>
</nav>

Related Examples

Breadcrumbs
Basic navigation trail with SVG icon

Author:
Anja Müller

2 years ago

8.1k
Breadcrumbs

Author:
Sophia Baker

3 years ago

10.3k
Breadcrumb

Author:
Laurits

2 years ago

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

Author:
Nick Girga

7 months ago

838
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

216
Mfuranziza Hamza
Mfuranziza Hamza full development

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

473
Simple Breadcrumbs
simple yet modern breadcrumbs UI

Author:
EliteAI Tools

10 months ago

907
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)

6 months ago

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

6 months ago

695
ACODE,ASTER
love my projuct

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

585
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

555
Skywings
used in traveling flight

Author:
INGRIDE MUZIRANENGE

4 days ago

40

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components