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

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

Author:
Prajwal Hallale

2 years ago

8.5k
Breadcrumb with icon

Author:
Samuel Dawson

2 years ago

11.3k
Breadcrumbs

Author:
Sophia Baker

2 years ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

180
Breadcrum
Different styles of breadcrum component

Author:
Rajesh Maheshwari

8 months ago

948
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:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

576
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

129
Breadcrumb

Author:
Gopi Yadav

3 years ago

9.8k
Breadcrumb
minimal modern breadcrumb design

Author:
OmKar Mehta

1 year ago

2.3k
Simple Breadcrumbs
simple yet modern breadcrumbs UI

Author:
EliteAI Tools

9 months ago

858

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components