DEV Community

kouliavtsev
kouliavtsev

Posted on

1

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

And you got yourself some breadcrumbs!

Breadcrumbs with Tailwind CSS

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more