About this set
Breadcrumbs made of chips, for interfaces that already use rounded controls. Separate pills puts each level in a mint chip with a thin outline and chevrons between them, and shows the current page as a solid green pill. Segmented track holds a short path inside one grey pill, with the current level raised on a white chip like a segmented control, which suits help centres and settings with two or three levels. Tags draws every level as a luggage tag with a pointed end and a punched hole, a good match for category and taxonomy paths in shops, recipe sites and blogs. The pills are ordinary links with padding and a large border radius, so their hit area is generous on touch screens. The tag outline is clip-path on li::before and the hole is a radial-gradient mask, so the shape costs no images and no extra markup. The Bootstrap version builds the track from its own –bs-breadcrumb-bg, padding and radius variables, and the Tailwind version keeps the tag shape in a single custom utility.
What’s included
- Separate pills, segmented track and tag-shaped variants
- Tag outline and punched hole made with clip-path and a radial mask
- Large tap targets from padded, fully rounded links
- Track variant uses Bootstrap's own --bs-breadcrumb-bg and radius variables
- Chevron separators hidden from screen readers
Accessibility
Every variant is a nav labelled Breadcrumb around an ordered list, with aria-current="page" on the last level. Chip text is dark green on a pale fill or white on a dark green fill, all above 4.5:1. Chevrons and tag shapes are decorative pseudo-elements with no text. Links get a 2px focus outline, and fill transitions stop under prefers-reduced-motion.
Customise it
Edit --pl-bg, --pl-line, --pl-fg and --pl-cur-bg on .pills and --tg-bg, --tg-fg and --tg-cur-bg on .tags (the Bootstrap version uses the same names). In Tailwind change the bg-, text- and shadow- classes on the links, and the before:bg- classes on the tags.
