Home
Md. Tofayel islam
Default breadcrumb

Default breadcrumb

Use the following breadcrumb example to show the hierarchical structure of pages

This tailwind example is contributed by Md. Tofayel islam, on 15-Mar-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Breadcrumb

Author Md. Tofayel islam

2.8k

Fork Fullscreen

<nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
        <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
        </svg>
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <a href="#" class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2 dark:text-gray-400 dark:hover:text-white">Projects</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400">details</span>
      </div>
    </li>
  </ol>
</nav>

Related Examples

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)

2 months ago

408
ULTIMATE SNAKE
(click to https://quantum-snake.netlify.app/ )ULTIMATE SNAKE is a modern reimagining of the classic Snake game, blending retro gameplay with enhanced visuals, power-ups, and a dynamic difficulty system. Designed for both casual players and high-score chasers, this game brings nostalgia and excitement in every move.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

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

Author:
Nick Girga

3 months ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

122
Breadcrumb with icon

Author:
Samuel Dawson

2 years ago

11.2k
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

6 months ago

1.1k
Breadcrumb

Author:
Rajesh Maheshwari

5 months ago

521
Breadcrumbs
Basic navigation trail with SVG icon

Author:
Anja Müller

1 year ago

7.8k
Simple Breadcrumbs
simple yet modern breadcrumbs UI

Author:
EliteAI Tools

7 months ago

605
Acode Master
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

500
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"

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

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

2 months ago

678

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components