breadcrumb

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -51,6 +51,7 @@
                     <FluentNavLink Href="compocounterbadge" Icon="@(new Icons.Regular.Size20.NumberCircle1())" IconColor="Color.Accent">CounterBadge</FluentNavLink>
                     <FluentNavLink Href="compopresencebadge" Icon="@(new Icons.Regular.Size20.CheckmarkCircle())" IconColor="Color.Accent">PresenceBadge</FluentNavLink>
                 </FluentNavGroup>
+                <FluentNavLink Href="compobreadcrumb" Icon="@(new Icons.Regular.Size20.FoodPizza())" IconColor="Color.Accent">Breadcrumb</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/Components/CompoBreadCrumb.razor

@@ -0,0 +1,67 @@
+@page "/compobreadcrumb"
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Breadcrumb</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+The <code>FluentBreadcrumb</code> component wraps a web component of a <code>breadcrumb</code>.
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentBreadcrumbItem Href="#">
+        Breadcrumb item
+    </FluentBreadcrumbItem>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">With custom separator and icons</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Vertical">
+        <FluentBreadcrumbItem Href="#">
+            Breadcrumb item
+            <FluentIcon Value="@(new Icons.Regular.Size16.ChevronDoubleRight())" Color="@Color.Neutral" Slot="separator" />
+        </FluentBreadcrumbItem>
+
+        <FluentBreadcrumbItem Href="#">
+            Breadcrumb item
+            <FluentIcon Value="@(new Icons.Regular.Size16.ChevronDoubleRight())" Color="@Color.Neutral" Slot="separator" />
+            <FluentIcon Value="@(new Icons.Regular.Size16.AnimalDog())" Color="@Color.Neutral" Slot="start" />
+            <FluentIcon Value="@(new Icons.Regular.Size16.AnimalDog())" Color="@Color.Neutral" Slot="end" />
+        </FluentBreadcrumbItem>
+    </FluentStack>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Nested</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Vertical">
+        <FluentBreadcrumb>
+            <FluentBreadcrumbItem Href="#">
+                Breadscrumb item1
+            </FluentBreadcrumbItem>
+            <FluentBreadcrumbItem Href="#">
+                Breadscrumb item2
+            </FluentBreadcrumbItem>
+            <FluentBreadcrumbItem>
+                Breadscrumb item3
+            </FluentBreadcrumbItem>
+        </FluentBreadcrumb>
+
+        <FluentBreadcrumb>
+            <FluentBreadcrumbItem Href="#">
+                Home
+                <FluentIcon Value="@(new Icons.Regular.Size16.Home())" Color="@Color.Neutral" Slot="start"/>
+            </FluentBreadcrumbItem>
+            <FluentBreadcrumbItem Href="#">
+                Options
+                <FluentIcon Value="@(new Icons.Regular.Size16.Options())" Color="@Color.Neutral" Slot="start" />
+            </FluentBreadcrumbItem>
+            <FluentBreadcrumbItem>
+                Payments
+                <FluentIcon Value="@(new Icons.Regular.Size16.Money())" Color="@Color.Neutral" Slot="start" />
+            </FluentBreadcrumbItem>
+        </FluentBreadcrumb>
+    </FluentStack>
+</FluentCard>
+
+@code {
+
+}