pages._explore-components-navigation-breadcrumbs.title

pages._explore.sections.basic-usage.title

html

<Breadcrumbs />

typescript

<script setup lang="ts">
// The Breadcrumbs component automatically generates breadcrumbs
// based on the current route path
// Uses i18n keys in format: crumbs.{route-name}.title
</script>

pages._explore.sections.complex-usage.title

html

<Breadcrumbs 
    separator="solar:chevron-right-linear"
/>

typescript

<script setup lang="ts">
// Custom separator icon
// Default separator is "solar:alt-arrow-right-linear"
</script>

Separator Options

html

<!-- Default separator (alt-arrow-right) -->
<Breadcrumbs />

<!-- Chevron separator -->
<Breadcrumbs separator="solar:chevron-right-linear" />

<!-- Double chevron separator -->
<Breadcrumbs separator="solar:double-alt-arrow-right-bold-duotone" />

<!-- Slash separator -->
<Breadcrumbs separator="solar:slash-square-linear" />

typescript

<script setup lang="ts">
// Different separator icon options
// Any Solar icon can be used as a separator
</script>

Live Example

Current breadcrumbs for this page:With custom separator:

Note: The breadcrumbs automatically generate from the current route path. Each breadcrumb (except the last) is clickable and will navigate to that route. The last breadcrumb represents the current page and is not clickable.

html

<div class="space-y-4">
    <Text text="Current breadcrumbs for this page:" />
    <Breadcrumbs />
    
    <Text text="With custom separator:" />
    <Breadcrumbs separator="solar:chevron-right-linear" />
</div>

typescript

<script setup lang="ts">
// The breadcrumbs automatically reflect the current page route
// For example: Home > Explore > Components > Navigation
// Each breadcrumb (except the last) is clickable and navigates to that route
</script>

pages._explore.sections.props.title

Prop	Default	Type
separator	undefined (uses "solar:alt-arrow-right-linear")	string

pages._explore.sections.types.title

Name	Type	Options
BreadcrumbItem	interface	{ name: string, route: string }