Phenix Storybook

Breadcrumb

Component has 3 parts

Read more Read less

(icon, image) breadcrumb (badges)

badges are a slot, pushed in badges container to the right. Component also support a single badge to be pushed in badges container, when slot can’t be used.

Default Open in playground 
<.breadcrumb
  id="breadcrumb-single-default"
  links={[{"Ecrans", "#"}, {"Barbershop", "#"}, {"Utilisateurs", "#"}]}
/>
With icon Open in playground 
<.breadcrumb
  id="breadcrumb-single-with-icon"
  links={[{"Ecrans", "#"}, {"Barbershop", "#"}, {"Utilisateurs", "#"}]}
  icon="fa fa-tv"
/>
With image Open in playground 
<.breadcrumb
  id="breadcrumb-single-with-image"
  links={[{"Ecrans", "#"}, {"Barbershop", "#"}, {"Utilisateurs", "#"}]}
  image="https://s3.eu-west-1.amazonaws.com/livescreen/shops/shop-6408.png"
/>
With badge Open in playground 
<.breadcrumb
  id="breadcrumb-single-with-badge"
  links={[{"Ecrans", "#"}, {"Barbershop", "#"}, {"Utilisateurs", "#"}]}
  badge={%{icon: "fa fa-alicorn", theme: :displays}}
/>
With badge slot Open in playground 
<.breadcrumb
  id="breadcrumb-single-with-badge-slot"
  links={[{"Ecrans", "#"}, {"Barbershop", "#"}, {"Utilisateurs", "#"}]}
>
  <:badges>
  <.badge icon="fa fa-alicorn"/>
  </:badges>
</.breadcrumb>