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 v3.4. It is responsive.

Breadcrumb

Author Anja Müller

Tailwind v3.4 8.8k 11

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

Ava Brown

3 years ago

10.2k
Breadcrumbs

Prajwal Hallale

3 years ago

8.6k
Breadcrumb with icon

Samuel Dawson

3 years ago

11.9k
Breadcrumbs

Sophia Baker

3 years ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

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

Abhiraj

1 year ago

3k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

4 months ago

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

Ayyamperumal S

1 year ago

2.9k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

626
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Ayyamperumal S

7 months ago

1.1k
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"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k