@page "/components/navigation-menu"

<PageTitle>Navigation Menu — Lumeo</PageTitle>

<PageHeader Title="Navigation Menu" Description="A collection of links for navigating websites, with support for flyout content panels." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Site-wide navigation in headers with links and flyout panels</li>
        <li>Header navigation bars with grouped link categories</li>
        <li>Mega menus displaying rich content like descriptions, badges, and icons</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <NavigationMenu>
            <NavigationMenuList>
                <NavigationMenuItem>
                    <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
                    <NavigationMenuContent>
                        <Grid Class="gap-3 w-[400px] md:w-[500px] md:grid-cols-2">
                            <NavigationMenuLink Href="#">
                                <Lumeo.Text Size="sm" Weight="medium" Class="leading-none">Introduction</Lumeo.Text>
                                <Lumeo.Text Size="sm" Color="muted" Class="line-clamp-2 leading-snug mt-1">
                                    Learn the basics of building with Lumeo components.
                                </Lumeo.Text>
                            </NavigationMenuLink>
                            <NavigationMenuLink Href="#">
                                <Lumeo.Text Size="sm" Weight="medium" Class="leading-none">Installation</Lumeo.Text>
                                <Lumeo.Text Size="sm" Color="muted" Class="line-clamp-2 leading-snug mt-1">
                                    Add Lumeo to your Blazor project in minutes.
                                </Lumeo.Text>
                            </NavigationMenuLink>
                            <NavigationMenuLink Href="#">
                                <Lumeo.Text Size="sm" Weight="medium" Class="leading-none">Typography</Lumeo.Text>
                                <Lumeo.Text Size="sm" Color="muted" Class="line-clamp-2 leading-snug mt-1">
                                    Styles for headings, paragraphs, lists, and more.
                                </Lumeo.Text>
                            </NavigationMenuLink>
                            <NavigationMenuLink Href="#">
                                <Lumeo.Text Size="sm" Weight="medium" Class="leading-none">Theming</Lumeo.Text>
                                <Lumeo.Text Size="sm" Color="muted" Class="line-clamp-2 leading-snug mt-1">
                                    Customize colors, fonts, and spacing to match your brand.
                                </Lumeo.Text>
                            </NavigationMenuLink>
                        </Grid>
                    </NavigationMenuContent>
                </NavigationMenuItem>
                <NavigationMenuItem>
                    <NavigationMenuTrigger>Components</NavigationMenuTrigger>
                    <NavigationMenuContent>
                        <Grid Class="gap-3 w-[400px] md:w-[500px] md:grid-cols-2">
                            <NavigationMenuLink Href="#">
                                <Lumeo.Text Size="sm" Weight="medium" Class="leading-none">Button</Lumeo.Text>
                                <Lumeo.Text Size="sm" Color="muted" Class="line-clamp-2 leading-snug mt-1">
                                    Trigger actions or navigation events.
                                </Lumeo.Text>
                            </NavigationMenuLink>
                            <NavigationMenuLink Href="#">
                                <Lumeo.Text Size="sm" Weight="medium" Class="leading-none">Card</Lumeo.Text>
                                <Lumeo.Text Size="sm" Color="muted" Class="line-clamp-2 leading-snug mt-1">
                                    Group related content in a flexible container.
                                </Lumeo.Text>
                            </NavigationMenuLink>
                            <NavigationMenuLink Href="#">
                                <Lumeo.Text Size="sm" Weight="medium" Class="leading-none">Dialog</Lumeo.Text>
                                <Lumeo.Text Size="sm" Color="muted" Class="line-clamp-2 leading-snug mt-1">
                                    Display modal content that requires attention.
                                </Lumeo.Text>
                            </NavigationMenuLink>
                            <NavigationMenuLink Href="#">
                                <Lumeo.Text Size="sm" Weight="medium" Class="leading-none">Table</Lumeo.Text>
                                <Lumeo.Text Size="sm" Color="muted" Class="line-clamp-2 leading-snug mt-1">
                                    Display data in a structured tabular format.
                                </Lumeo.Text>
                            </NavigationMenuLink>
                        </Grid>
                    </NavigationMenuContent>
                </NavigationMenuItem>
                <NavigationMenuItem>
                    <NavigationMenuLink Href="#" Class="group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium">
                        Documentation
                    </NavigationMenuLink>
                </NavigationMenuItem>
            </NavigationMenuList>
        </NavigationMenu>
    </ComponentDemo>
    <ComponentDemo Title="Simple Links" Code="@_linksCode">
        <NavigationMenu>
            <NavigationMenuList>
                <NavigationMenuItem>
                    <NavigationMenuLink Href="#" Class="group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors">
                        Home
                    </NavigationMenuLink>
                </NavigationMenuItem>
                <NavigationMenuItem>
                    <NavigationMenuLink Href="#" Class="group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors">
                        About
                    </NavigationMenuLink>
                </NavigationMenuItem>
                <NavigationMenuItem>
                    <NavigationMenuLink Href="#" Class="group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors">
                        Blog
                    </NavigationMenuLink>
                </NavigationMenuItem>
                <NavigationMenuItem>
                    <NavigationMenuLink Href="#" Class="group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors">
                        Contact
                    </NavigationMenuLink>
                </NavigationMenuItem>
            </NavigationMenuList>
        </NavigationMenu>
    </ComponentDemo>

    <ComponentDemo Title="With Badge" Code="@_badgeCode">
        <NavigationMenu>
            <NavigationMenuList>
                <NavigationMenuItem>
                    <NavigationMenuTrigger>Products</NavigationMenuTrigger>
                    <NavigationMenuContent>
                        <Grid Class="gap-3 w-[360px] p-2">
                            <NavigationMenuLink Href="#">
                                <Flex Align="center" Gap="2">
                                    <Lumeo.Text Size="sm" Weight="medium" Class="leading-none">Analytics</Lumeo.Text>
                                    <Badge>New</Badge>
                                </Flex>
                                <Lumeo.Text Size="sm" Color="muted" Class="line-clamp-2 leading-snug mt-1">
                                    Real-time data insights and dashboards.
                                </Lumeo.Text>
                            </NavigationMenuLink>
                            <NavigationMenuLink Href="#">
                                <Lumeo.Text Size="sm" Weight="medium" Class="leading-none">Integrations</Lumeo.Text>
                                <Lumeo.Text Size="sm" Color="muted" Class="line-clamp-2 leading-snug mt-1">
                                    Connect with 200+ tools and services.
                                </Lumeo.Text>
                            </NavigationMenuLink>
                            <NavigationMenuLink Href="#">
                                <Flex Align="center" Gap="2">
                                    <Lumeo.Text Size="sm" Weight="medium" Class="leading-none">API</Lumeo.Text>
                                    <Badge Variant="Badge.BadgeVariant.Secondary">Beta</Badge>
                                </Flex>
                                <Lumeo.Text Size="sm" Color="muted" Class="line-clamp-2 leading-snug mt-1">
                                    Programmatic access to all platform features.
                                </Lumeo.Text>
                            </NavigationMenuLink>
                        </Grid>
                    </NavigationMenuContent>
                </NavigationMenuItem>
                <NavigationMenuItem>
                    <NavigationMenuLink Href="#" Class="group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent transition-colors">
                        Pricing
                    </NavigationMenuLink>
                </NavigationMenuItem>
            </NavigationMenuList>
        </NavigationMenu>
    </ComponentDemo>
</Stack>

<div class="mt-16">
    <Heading Id="api-reference" Level="2" Class="scroll-mt-20">API Reference</Heading>

    <Heading Id="navigationmenu" Level="3" Class="mt-8 scroll-mt-20">NavigationMenu</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The navigation menu content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="navigationmenulist" Level="3" Class="mt-8 scroll-mt-20">NavigationMenuList</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The list of navigation menu items.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="navigationmenuitem" Level="3" Class="mt-8 scroll-mt-20">NavigationMenuItem</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The item content (trigger and/or content).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="navigationmenutrigger" Level="3" Class="mt-8 scroll-mt-20">NavigationMenuTrigger</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The trigger label content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="navigationmenucontent" Level="3" Class="mt-8 scroll-mt-20">NavigationMenuContent</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The dropdown panel content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="navigationmenulink" Level="3" Class="mt-8 scroll-mt-20">NavigationMenuLink</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">Href</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>URL the navigation link points to.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The link content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="navigationmenuhamburger" Level="3" Class="mt-8 scroll-mt-20">NavigationMenuHamburger</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">Open</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Whether the mobile menu is open.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">OpenChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;bool&gt;</TableCell><TableCell Class="font-mono text-xs">-</TableCell><TableCell>Callback when open state changes. Use with @@bind-Open.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="navigationmenumobile" Level="3" Class="mt-8 scroll-mt-20">NavigationMenuMobile</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Mobile menu content rendered inside a Sheet.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Open</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Whether the mobile menu is open.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">OpenChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;bool&gt;</TableCell><TableCell Class="font-mono text-xs">-</TableCell><TableCell>Callback when open state changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="navigationmenuindicator" Level="3" Class="mt-8 scroll-mt-20">NavigationMenuIndicator</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Custom indicator content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="navigationmenuviewport" Level="3" Class="mt-8 scroll-mt-20">NavigationMenuViewport</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Viewport container content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/menubar" class="text-primary hover:underline">Menubar</a> — For desktop-style application menu bars with keyboard shortcuts</li>
        <li><a href="/components/sidebar" class="text-primary hover:underline">Sidebar</a> — For vertical side navigation with collapsible sections</li>
        <li><a href="/components/breadcrumb" class="text-primary hover:underline">Breadcrumb</a> — For displaying the current page path within a navigation hierarchy</li>
    </ul>
</div>

@code {
    private string _linksCode = @"<NavigationMenu>
    <NavigationMenuList>
        <NavigationMenuItem>
            <NavigationMenuLink Href=""#"" Class=""..."">Home</NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
            <NavigationMenuLink Href=""#"" Class=""..."">About</NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
            <NavigationMenuLink Href=""#"" Class=""..."">Blog</NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
            <NavigationMenuLink Href=""#"" Class=""..."">Contact</NavigationMenuLink>
        </NavigationMenuItem>
    </NavigationMenuList>
</NavigationMenu>";

    private string _badgeCode = @"<NavigationMenu>
    <NavigationMenuList>
        <NavigationMenuItem>
            <NavigationMenuTrigger>Products</NavigationMenuTrigger>
            <NavigationMenuContent>
                <NavigationMenuLink Href=""#"">
                    <Flex Align=""center"" Gap=""2"">
                        <Lumeo.Text As=""span"" Size=""sm"" Weight=""medium"">Analytics</Lumeo.Text>
                        <Badge>New</Badge>
                    </Flex>
                </NavigationMenuLink>
                <NavigationMenuLink Href=""#"">
                    <Flex Align=""center"" Gap=""2"">
                        <Lumeo.Text As=""span"" Size=""sm"" Weight=""medium"">API</Lumeo.Text>
                        <Badge Variant=""Badge.BadgeVariant.Secondary"">Beta</Badge>
                    </Flex>
                </NavigationMenuLink>
            </NavigationMenuContent>
        </NavigationMenuItem>
    </NavigationMenuList>
</NavigationMenu>";

    private string _defaultCode = @"<NavigationMenu>
    <NavigationMenuList>
        <NavigationMenuItem>
            <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
            <NavigationMenuContent>
                <div class=""grid gap-3 w-[400px] md:grid-cols-2"">
                    <NavigationMenuLink Href=""#"">
                        <Lumeo.Text Size=""sm"" Weight=""medium"">Introduction</Lumeo.Text>
                        <Lumeo.Text Size=""sm"" Color=""muted"" Class=""mt-1"">
                            Learn the basics of building with Lumeo.
                        </Lumeo.Text>
                    </NavigationMenuLink>
                    <NavigationMenuLink Href=""#"">
                        <Lumeo.Text Size=""sm"" Weight=""medium"">Installation</Lumeo.Text>
                        <Lumeo.Text Size=""sm"" Color=""muted"" Class=""mt-1"">
                            Add Lumeo to your Blazor project.
                        </Lumeo.Text>
                    </NavigationMenuLink>
                </div>
            </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
            <NavigationMenuTrigger>Components</NavigationMenuTrigger>
            <NavigationMenuContent>
                <div class=""grid gap-3 w-[400px] md:grid-cols-2"">
                    <NavigationMenuLink Href=""#"">
                        <Lumeo.Text Size=""sm"" Weight=""medium"">Button</Lumeo.Text>
                        <Lumeo.Text Size=""sm"" Color=""muted"" Class=""mt-1"">
                            Trigger actions or navigation events.
                        </Lumeo.Text>
                    </NavigationMenuLink>
                </div>
            </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
            <NavigationMenuLink Href=""#"">
                Documentation
            </NavigationMenuLink>
        </NavigationMenuItem>
    </NavigationMenuList>
</NavigationMenu>";
}
