<.breadcrumbs style="slash">
  <.breadcrumb id="home-breadcrumb" label="Home">
    <:icon><.smart_home /></:icon>
  </.breadcrumb>
  <.breadcrumb id="products-breadcrumb" label="Products">
    <.breadcrumb_item id="electronics-item" value="electronics" label="Electronics" />
    <.breadcrumb_item id="phones-item" value="phones" label="Phones" selected={true} />
  </.breadcrumb>
  <.breadcrumb id="category-breadcrumb" label="iPhone 15" />
</.breadcrumbs>
<.breadcrumbs style="arrow">
  <.breadcrumb id="home-breadcrumb-arrow" label="Home">
    <:icon><.smart_home /></:icon>
  </.breadcrumb>
  <.breadcrumb id="products-breadcrumb-arrow" label="Products">
    <.breadcrumb_item id="electronics-item-arrow" value="electronics" label="Electronics" />
    <.breadcrumb_item id="phones-item-arrow" value="phones" label="Phones" selected={true} />
  </.breadcrumb>
  <.breadcrumb id="category-breadcrumb-arrow" label="iPhone 15" />
</.breadcrumbs>

<.breadcrumbs style="slash">
  <.breadcrumb id="org-breadcrumb" label="Tuist" show_avatar avatar_color="blue" />
  <.breadcrumb id="project-breadcrumb" label="iOS App" show_avatar avatar_color="green">
    <.breadcrumb_item id="feature-item" value="feature" label="Features" show_avatar avatar_color="orange" />
    <.breadcrumb_item id="auth-item" value="auth" label="Authentication" show_avatar avatar_color="purple" selected={true} />
  </.breadcrumb>
  <.breadcrumb id="current-breadcrumb" label="Login Screen" show_avatar avatar_color="red" />
</.breadcrumbs>
<.breadcrumbs style="slash">
  <.breadcrumb id="dashboard-breadcrumb" label="Dashboard">
    <:icon><.smart_home /></:icon>
  </.breadcrumb>
  <.breadcrumb id="settings-breadcrumb" label="Settings" />
  <.breadcrumb id="profile-breadcrumb" label="Profile" />
</.breadcrumbs>
<.breadcrumbs style="arrow">
  <.breadcrumb id="simple-home" label="Home">
    <:icon><.smart_home /></:icon>
  </.breadcrumb>
  <.breadcrumb id="simple-docs" label="Documentation" />
  <.breadcrumb id="simple-guides" label="Guides" />
  <.breadcrumb id="simple-current" label="Getting Started" />
</.breadcrumbs>

<.breadcrumbs style="slash">
  <.breadcrumb id="org-many" label="Organization">
    <:icon><.smart_home /></:icon>
    <.breadcrumb_item id="team1" value="team1" label="Team Alpha" />
    <.breadcrumb_item id="team2" value="team2" label="Team Beta" />
    <.breadcrumb_item id="team3" value="team3" label="Team Gamma" />
    <.breadcrumb_item id="team4" value="team4" label="Team Delta" selected={true} />
  </.breadcrumb>
  <.breadcrumb id="project-many" label="Project X" />
</.breadcrumbs>
<.breadcrumbs style="arrow">
  <.breadcrumb id="company-mixed" label="Company" show_avatar avatar_color="blue" />
  <.breadcrumb id="dept-mixed" label="Engineering">
    <.breadcrumb_item id="backend" value="backend" label="Backend Team" show_avatar avatar_color="red" />
    <.breadcrumb_item id="frontend" value="frontend" label="Frontend Team" show_avatar avatar_color="green" selected={true} />
  </.breadcrumb>
  <.breadcrumb id="current-mixed" label="React Components" />
</.breadcrumbs>