<.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>