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
Breadcrumb with icon

Author:
Samuel Dawson

2 years ago

11.3k
Breadcrumbs

Author:
Prajwal Hallale

2 years ago

8.5k
Breadcrumbs

Author:
Sophia Baker

2 years ago

10k
Breadcrumb

Author:
Rajesh Maheshwari

6 months ago

647
Innovative Rwanda-Canada Transport Services Website
Innovative Rwanda-Canada Transport Services Website

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 weeks ago

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

Author:
Nick Girga

4 months ago

690
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

1 week ago

34
Breadcrumb

Author:
Laurits

2 years ago

11.4k
Breadcrumb
minimal modern breadcrumb design

Author:
OmKar Mehta

1 year ago

2.1k
Simple Breadcrumbs
simple yet modern breadcrumbs UI

Author:
EliteAI Tools

8 months ago

709
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

4 months ago

987

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components