Moon liveview storybook Moon Liveview Storybook

Breadcrumbs

Website
Moon Design System Website
HEX
View package HEX
GitHub
View repository GitHub
Default Open in playground 
<.breadcrumbs >
  <:crumb><.link data-testid="four-breadcrumbs-link-0" href="#">Home</.link></:crumb>
  <:crumb><.link data-testid="four-breadcrumbs-link-1" href="#">Page 1</.link></:crumb>
  <:crumb><.link data-testid="four-breadcrumbs-link-2" href="#">Page 2</.link></:crumb>
  <:crumb><span data-testid="four-breadcrumbs-current">Current page</span></:crumb>
</.breadcrumbs>
More than four items Open in playground 
<.breadcrumbs >
  <:crumb><.link href="#" data-testid="default-breadcrumbs-link-0">Home</.link></:crumb>
  <:crumb><.link href="#" data-testid="default-breadcrumbs-link-1">Page 1</.link></:crumb>
  <:crumb><.link href="#" data-testid="default-breadcrumbs-link-2">Page 2</.link></:crumb>
  <:crumb><.link href="#" data-testid="default-breadcrumbs-link-3">Page 3</.link></:crumb>
  <:crumb><.link href="#" data-testid="default-breadcrumbs-link-4">Page 4</.link></:crumb>
  <:crumb><span data-testid="default-breadcrumbs-current">Current page</span></:crumb>
</.breadcrumbs>
Collapsed only if more than 7 Open in playground 
<.breadcrumbs collapse_after={7}>
  <:crumb><.link data-testid="collapsed-breadcrumbs-link-0" href="#">Home</.link></:crumb>
  <:crumb><.link data-testid="collapsed-breadcrumbs-link-1" href="#">Page 1</.link></:crumb>
  <:crumb><.link data-testid="collapsed-breadcrumbs-link-2" href="#">Page 2</.link></:crumb>
  <:crumb><.link data-testid="collapsed-breadcrumbs-link-3" href="#">Page 3</.link></:crumb>
  <:crumb><.link data-testid="collapsed-breadcrumbs-link-4" href="#">Page 4</.link></:crumb>
  <:crumb><span data-testid="collapsed-breadcrumbs-current">Current page</span></:crumb>
</.breadcrumbs>
Two Items Open in playground 
<.breadcrumbs >
   <:crumb><.link data-testid="two-breadcrumbs-parent" href="#">Home</.link></:crumb>
  <:crumb><span data-testid="two-breadcrumbs-current">Current page</span></:crumb>
</.breadcrumbs>
One Item Open in playground 
<.breadcrumbs >
    <:crumb><span data-testid="one-breadcrumbs-current">Current page</span></:crumb>
</.breadcrumbs>
Custom Icon & divider Open in playground 
<.breadcrumbs >
    <: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>
</.breadcrumbs>
Fit items to parent width with ellipsis Open in playground 
<div class="max-w-sm">
<.breadcrumbs >
    <:crumb><.link href="#" data-testid="ellipsis-breadcrumbs-link-0">Home</.link></:crumb>
  <:crumb><.link href="#" data-testid="ellipsis-breadcrumbs-link-1">Tennis</.link></:crumb>
  <:crumb>
  <.link href="#" data-testid="ellipsis-breadcrumbs-link-2">Challenger </.link>
  </:crumb>
  <:crumb>
  <span data-testid="ellipsis-breadcrumbs-current">ATP Challenger Vilnius, Lithuania </span>
  </:crumb>
</.breadcrumbs>
</div>