Let's build a simple breadcrumbs component with Tailwind CSS

Here is an example of creating a simple breadcrumb component with Tailwind CSS.

Add initial HTML.

<nav aria-label="Breadcrumb">
    <ul>
        <li><a href="/">Home</a></li>
        <li><span aria-current="page">Category</span></li>
    </ul>
</nav>

Add three lines of CSS code.

<nav aria-label="Breadcrumb">
  <ul className="flex">
    <li className="after:content-['/'] after:px-2">
      <a href="/" className="underline">
        Home
      </a>
    </li>
    <li>
      <span aria-current="page">Category</span>
    </li>
  </ul>
</nav>

And you got yourself some breadcrumbs!

Blog

Let's build a simple breadcrumbs component with Tailwind CSS

kouliavtsev

Join Our Newsletter. No Spam, Only the good stuff.

Related