DEV Community

kouliavtsev
kouliavtsev

Posted on

Let's build a simple breadcrumbs component with Tailwind CSS

#tailwindcss #css #webdev #beginners

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)