Breadcrumbs – 8 Free CSS, Bootstrap & Tailwind Sets
Breadcrumbs is a pack of eight breadcrumb navigation sets, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5.3 built on its own .breadcrumb component and –bs-breadcrumb-divider, and Tailwind CSS 4. It covers classic separators, arrow steps, pills and tags, icons, long paths that collapse or shorten on small screens, page headers, a dark set and a modern CSS set with popover menus, and one example includes BreadcrumbList structured data.
A good breadcrumb is quiet and exact. It sits in a nav element labelled Breadcrumb, uses an ordered list because the order is the meaning, and marks the last item with aria-current="page" instead of linking a page to itself. Its separators are drawn in CSS so screen readers do not read out a row of slashes, its links are large enough to tap, and long paths collapse instead of wrapping into three lines on a phone. When the same path is also published as BreadcrumbList JSON-LD, search engines can show it in results in place of the raw URL.
