Breadcrumb
Breadcrumbs provide navigation context and allow users to quickly navigate the current page's hierarchy.
<sa-breadcrumb>
<sa-breadcrumb-list>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="#">Home</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="#">Europe</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="#">Italy</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-page>Grand Hotel Venice</sa-breadcrumb-page>
</sa-breadcrumb-list>
</sa-breadcrumb>Usage
<sa-breadcrumb>
<sa-breadcrumb-list>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="...">Level 1</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="...">Level 2</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-page>Current Page</sa-breadcrumb-page>
</sa-breadcrumb-list>
</sa-breadcrumb>Examples
Custom separator
Use the Icon Tag Helper for a custom separator.
<sa-breadcrumb>
<sa-breadcrumb-list>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="#">Home</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator>
<sa-icon name="slash"/>
</sa-breadcrumb-separator>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="#">Europe</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator>
<sa-icon name="slash"/>
</sa-breadcrumb-separator>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="#">
Italy
</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator>
<sa-icon name="slash"/>
</sa-breadcrumb-separator>
<sa-breadcrumb-page>Grand Hotel Venice</sa-breadcrumb-page>
</sa-breadcrumb-list>
</sa-breadcrumb>Collapsed
Use the <sa-breadcrumb-ellipsis /> component to collapse a large navigation hierarchy.
<sa-breadcrumb>
<sa-breadcrumb-list>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="#">Home</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-item>
<sa-breadcrumb-ellipsis />
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="#">Trip #TRV-987</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-page>Add Traveler Details</sa-breadcrumb-page>
</sa-breadcrumb-list>
</sa-breadcrumb>Custom CSS
Use the class attribute to add custom CSS styling to any of the breadcrumb components.
<sa-breadcrumb>
<sa-breadcrumb-list class="h-8 gap-2 rounded-md border px-3 text-sm">
<sa-breadcrumb-item class="hover:underline underline-offset-4 transition-all">
<sa-breadcrumb-link href="#">Home</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-item class="hover:underline underline-offset-4 transition-all">
<sa-breadcrumb-link href="#">Bookings</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-item class="hover:underline underline-offset-4 transition-all">
<sa-breadcrumb-link href="#">Trip #TRV-987</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-page>Add Traveler Details</sa-breadcrumb-page>
</sa-breadcrumb-list>
</sa-breadcrumb>Icons
Use the Icon Tag Helper and custom CSS to display icons next to navigation items.
<sa-breadcrumb>
<sa-breadcrumb-list>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="#">Home</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="#" class="flex items-center gap-2">
<sa-icon name="tickets" class="size-4"/>
Bookings
</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="#" class="flex items-center gap-2">
<sa-icon name="plane" class="size-4"/>
Trip #TRV-987
</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-page>Add Traveler Details</sa-breadcrumb-page>
</sa-breadcrumb-list>
</sa-breadcrumb>