<.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-badge" label="Tuist" show_avatar avatar_color="blue" />
  <.breadcrumb id="project-badge" label="iOS App" badge_label="Xcode" badge_color="focus">
    <.breadcrumb_item id="ios-item" value="ios" label="iOS App" badge_label="Xcode" badge_color="focus" selected={true} href="#" />
    <.breadcrumb_item id="android-item" value="android" label="Android App" badge_label="Gradle" badge_color="success" href="#" />
  </.breadcrumb>
  <.breadcrumb id="cache-badge" label="Cache" />
</.breadcrumbs>
<.breadcrumbs style="slash">
  <.breadcrumb id="org-badge-items" label="Organization">
    <:icon><.smart_home /></:icon>
  </.breadcrumb>
  <.breadcrumb id="project-badge-items" label="Project">
    <.breadcrumb_item id="proj-alpha" value="alpha" label="Alpha" badge_label="Xcode" badge_color="focus" href="#" />
    <.breadcrumb_item id="proj-beta" value="beta" label="Beta" badge_label="Gradle" badge_color="success" href="#" selected={true} />
    <.breadcrumb_item id="proj-gamma" value="gamma" label="Gamma" badge_label="Xcode" badge_color="focus" href="#" />
  </.breadcrumb>
  <.breadcrumb id="settings-badge-items" label="Settings" />
</.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>