Moon liveview storybook Moon Liveview Storybook

Breadcrumbs

Website
Moon Design System Website
HEX
View package HEX
GitHub
View repository GitHub
Attribute Type Documentation Default Value
collapse_after :integer

Total amount of breadcrumbs before collapsed
4
rest :global

Other attributes of the Breadcrumbs
Required crumb * :slot

Breadcrumb

 
<:divider>
<.icon
name="chevron-right"
class="rtl:rotate-180"
data-testid="divider-breadcrumbs-custom-divider"
/>
</:divider>
<:crumb>
<.link href="#" data-testid="divider-breadcrumbs-link-0">
<.icon name="home" data-testid="divider-breadcrumbs-link-0-icon" />
</.link>
</:crumb>
<:crumb><.link href="#" data-testid="divider-breadcrumbs-link-1">Page 1</.link></:crumb>
<:crumb><.link href="#" data-testid="divider-breadcrumbs-link-2">Page 2</.link></:crumb>
<:crumb><.link href="#" data-testid="divider-breadcrumbs-link-3">Page 3</.link></:crumb>
<:crumb><.link href="#" data-testid="divider-breadcrumbs-link-4">Page 4</.link></:crumb>
<:crumb><span data-testid="divider-breadcrumbs-current">Current page</span></:crumb>
divider :slot

Custom divider element

 
<:divider>
<.icon
name="chevron-right"
class="rtl:rotate-180"
data-testid="divider-breadcrumbs-custom-divider"
/>
</:divider>
<:crumb>
<.link href="#" data-testid="divider-breadcrumbs-link-0">
<.icon name="home" data-testid="divider-breadcrumbs-link-0-icon" />
</.link>
</:crumb>
<:crumb><.link href="#" data-testid="divider-breadcrumbs-link-1">Page 1</.link></:crumb>
<:crumb><.link href="#" data-testid="divider-breadcrumbs-link-2">Page 2</.link></:crumb>
<:crumb><.link href="#" data-testid="divider-breadcrumbs-link-3">Page 3</.link></:crumb>
<:crumb><.link href="#" data-testid="divider-breadcrumbs-link-4">Page 4</.link></:crumb>
<:crumb><span data-testid="divider-breadcrumbs-current">Current page</span></:crumb>