BREADCRUMB: Horizontal navigation trail showing the user's location in a hierarchy.
CLASSES: .breadcrumb | .breadcrumb-item | .breadcrumb-item.active | .breadcrumb-item-icon
Breadcrumbs provide a secondary navigation scheme to help users understand their current location within a site hierarchy.
Wrap in a <nav aria-label="Breadcrumb"> for accessibility. The current page uses .active
and aria-current="page".
Basic: Simple text-based breadcrumb with linked ancestors and an active current page.
<nav aria-label="Breadcrumb"><ol class="tw-breadcrumb"><li class="tw-breadcrumb-item"><a href="#">Home</a></li><li class="tw-breadcrumb-item tw-active" aria-current="page">Current</li></ol></nav>
Icon: The first breadcrumb item can use an icon (e.g. home) instead of text. Apply .breadcrumb-item-icon to the SVG.
<li class="tw-breadcrumb-item"><a href="#" aria-label="Home"><svg class="tw-breadcrumb-item-icon">...</svg></a></li>
Short: A minimal breadcrumb with just a parent and the current page.
<ol class="tw-breadcrumb"><li class="tw-breadcrumb-item"><a href="#">Parent</a></li><li class="tw-breadcrumb-item tw-active">Current</li></ol>
Deep: Breadcrumbs gracefully handle longer paths with wrapping.
Breadcrumbs use flex-wrap so deep hierarchies wrap naturally to the next line.