Home
Anja Müller
Breadcrumbs

Breadcrumbs

Basic navigation trail with SVG icon

This tailwind example is contributed by Anja Müller, on 22-Sep-2023. Component is made with Tailwind CSS v3. It is responsive.

Breadcrumb

Author Anja Müller

7.6k

Fork Fullscreen

<nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-3">
    <li class="inline-flex items-center">
      <a href="#" class="ml-1 inline-flex text-sm font-medium text-gray-800 hover:underline md:ml-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-4 h-4 w-4">
          <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
          <polyline points="9 22 9 12 15 12 15 22"></polyline>
        </svg>
        Documentation
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <span class="mx-2.5 text-gray-800 ">/</span>
        <a href="#" class="ml-1 text-sm font-medium text-gray-800 hover:underline md:ml-2">
          Database
        </a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <span class="mx-2.5 text-gray-800 ">/</span>
        <span class="ml-1 text-sm font-medium text-gray-800 hover:underline md:ml-2">
          Replication
        </span>
      </div>
    </li>
  </ol>
</nav>

Related Examples

Basic breadcrumb

Author:
Ava Brown

2 years ago

9.1k
Breadcrumb with icon

Author:
Samuel Dawson

2 years ago

11k
Breadcrumbs

Author:
Prajwal Hallale

2 years ago

8.5k
Breadcrumbs

Author:
Sophia Baker

2 years ago

9.7k
Breadcrum
Different styles of breadcrum component

Author:
Rajesh Maheshwari

3 months ago

650
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:
Acode Master(Mfuranziza Dusabe Hamza)

6 days ago

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

Author:
Acode Master(Mfuranziza Dusabe Hamza)

1 week ago

45
Breadcrumb

Author:
Laurits

2 years ago

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

Author:
Acode Master(Mfuranziza Dusabe Hamza)

1 week ago

46
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:
Acode Master(Mfuranziza Dusabe Hamza)

6 days ago

59
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:
Acode Master(Mfuranziza Dusabe Hamza)

1 week ago

80
Your Creative Login Page
"Animated Image Login UI" "Tailwind Image Login with Animated Background" "Innovative User Login Experience" "Creative Bubble Background Login" "Login with Personality — Featuring Your Image" "Acode Master Animated Login" ✅ (customized for you)

Author:
Acode Master(Mfuranziza Dusabe Hamza)

1 week ago

56

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components