anchor 1

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -44,6 +44,7 @@
             <FluentNavGroup Icon="@(new Icons.Regular.Size20.PuzzlePiece())" Expanded="false" Title="Components">
                 <FluentNavLink Href="compooverview" Icon="@(new Icons.Regular.Size20.Eye())" IconColor="Color.Accent">Overview</FluentNavLink>
                 <FluentNavLink Href="compoaccordion" Icon="@(new Icons.Regular.Size20.ListBar())" IconColor="Color.Accent">Accordion</FluentNavLink>
+                <FluentNavLink Href="compoanchor" Icon="@(new Icons.Regular.Size20.LinkMultiple())" IconColor="Color.Accent">Anchor</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/Components/CompoAccordion.razor

@@ -5,7 +5,7 @@
 <FluentLabel Typo="Typography.H3">Accordion</FluentLabel>
 <FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
 <FluentLabel Typo="Typography.Body">
-    The <code>Accordion</code> wraps a web component of a <code>accordion</code> element.
+    The <code>FluentAccordion</code> wraps a web component of a <code>accordion</code> element.
     It uses the <code>FluentAccordionItem</code> component for defining the individual accordion items.
 </FluentLabel>
 

BlazorFluentUI/Components/Pages/Components/CompoAnchor.razor

@@ -0,0 +1,28 @@
+@page "/compoanchor"
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Anchor</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+The <code>FluentAnchor</code> wraps a web component of a <code>anchor</code> element.
+The <code>FluentAnchor</code> component supports the same visual appearances as the <code>FluentButton</code> component as well as a hypertext appearance.
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <p>Default</p>
+    <FluentAnchor Href="#" title="Anchor tooltip">Anchor</FluentAnchor>
+
+    <p>With target</p>
+    <FluentAnchor Href="https://www.fluentui-blazor.net/" Target="_blank">Fluent UI Blazor</FluentAnchor>
+
+    <p>With custom action</p>
+    <FluentAnchor Href="#" Appearance="Appearance.Hypertext"
+                  OnClick="@(() => message = "Anchor clicked!")">
+        Custom Action
+    </FluentAnchor>
+    <p><b>Message</b>: @message</p>
+</FluentCard>
+
+@code {
+    string? message;
+}