Navigation Menu

                        <RzNavigationMenu>
                            <NavigationMenuList>

                                <NavigationMenuItem>
                                    <NavigationMenuTrigger>Home</NavigationMenuTrigger>
                                    <NavigationMenuContent>
                                        <div class="w-[400px] gap-3 p-4">
                                            <h3 class="mb-2 text-lg font-semibold">Welcome to RizzyUI</h3>
                                            <p class="text-sm text-muted-foreground">
                                                Build beautiful ASP.NET Core applications with our comprehensive component library.
                                            </p>
                                        </div>
                                    </NavigationMenuContent>
                                </NavigationMenuItem>

                                <NavigationMenuItem>
                                    <NavigationMenuTrigger>Components</NavigationMenuTrigger>
                                    <NavigationMenuContent>
                                        <ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
                                            @foreach (var component in _components)
                                            {
                                                @ListItem(component.Title, component.Href,
                                                    @<text>@component.Description</text>
                                                )
                                            }
                                        </ul>
                                    </NavigationMenuContent>
                                </NavigationMenuItem>

                                <NavigationMenuItem>
                                    <NavigationMenuLink AsChild Href="/docs">
                                        <RzLink Color="SemanticColor.Foreground" Underline="false" class="@((string)Theme.NavigationMenuTrigger.Base!)">
                                            Docs
                                        </RzLink>
                                    </NavigationMenuLink>
                                </NavigationMenuItem>

                                <NavigationMenuItem>
                                    <NavigationMenuTrigger>List</NavigationMenuTrigger>
                                    <NavigationMenuContent>
                                        <ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
                                            <li class="row-span-3">
                                                <NavigationMenuLink>
                                                    <RzLink class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md">
                                                        <img src="/images/rizzy-logo-wb.svg" class="h-12 w-12" alt="RizzyUI Logo" />
                                                        <div class="mt-4 mb-2 text-lg font-medium">
                                                            RizzyUI
                                                        </div>
                                                        <p class="text-sm leading-tight text-muted-foreground">
                                                            Beautifully designed components built with Blazor and Tailwind CSS.
                                                        </p>
                                                    </RzLink>
                                                </NavigationMenuLink>
                                            </li>
                                            @ListItem("Introduction", "/docs",
                                                @<text>Re-usable components built for modern ASP.NET Core applications.</text>
                                            )
                                            @ListItem("Installation", "/docs/installation",
                                                @<text>How to install dependencies and structure your app.</text>
                                            )
                                            @ListItem("Typography", "/docs/primitives/typography",
                                                @<text>Styles for headings, paragraphs, lists...etc</text>
                                            )
                                        </ul>
                                    </NavigationMenuContent>
                                </NavigationMenuItem>

                                <NavigationMenuItem>
                                    <NavigationMenuTrigger>Simple</NavigationMenuTrigger>
                                    <NavigationMenuContent>
                                        <div class="grid gap-3 p-6 w-[300px]">
                                            <p class="text-sm font-medium">A Simple Menu</p>
                                            <p class="text-sm text-muted-foreground">
                                                This demonstrates a simple dropdown with basic content.
                                            </p>
                                        </div>
                                    </NavigationMenuContent>
                                </NavigationMenuItem>

                                <NavigationMenuItem>
                                    <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
                                    <NavigationMenuContent>
                                        <ul class="grid gap-3 p-6 w-[400px]">
                                            @IconListItem(MdiIcon.Package, "Package",
                                                @<text>Manage your package dependencies and configurations.</text>
                                            )
                                            @IconListItem(MdiIcon.AccountCircle, "Account",
                                                @<text>View and edit your account settings and preferences.</text>
                                            )
                                            @IconListItem(MdiIcon.Cog, "Settings",
                                                @<text>Configure your application settings and options.</text>
                                            )
                                        </ul>
                                    </NavigationMenuContent>
                                </NavigationMenuItem>

                            </NavigationMenuList>
                        </RzNavigationMenu>


@code {
    private readonly (string Title, string Href, string Description)[] _components = 
    {
        ("Alert", "/components/alert", "A modal dialog that interrupts the user with important content."),
        ("Accordion", "/components/accordion", "A vertically stacked set of interactive headings that each reveal a section of content."),
        ("Badge", "/components/badge", "Displays a badge or a component that looks like a badge."),
        ("Button", "/components/buttons", "An interactive element that executes a command or navigates."),
        ("Card", "/components/card", "A container for content and actions about a single subject."),
        ("Dropdown Menu", "/components/dropdown", "Displays a menu to the user — such as a set of actions or functions — triggered by a button.")
    };

    private RenderFragment ListItem(string title, string href, RenderFragment childContent) => @<li>
        <NavigationMenuLink>
            <RzLink Href="@href" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
                <div class="text-sm font-medium leading-none">@title</div>
                <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
                    @childContent
                </p>
            </RzLink>
        </NavigationMenuLink>
    </li>;
    
    private RenderFragment IconListItem(SvgIcon icon, string title, RenderFragment childContent) => @<li>
        <NavigationMenuLink>
            <RzLink Href="#" class="flex items-start space-x-3 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
                <span class="size-5 text-2xl mt-px text-muted-foreground" aria-hidden="true">
                    <Blazicon Svg="@icon"/>
                </span>
                <div class="space-y-1">
                    <div class="text-sm font-medium leading-none">@title</div>
                    <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        @childContent
                    </p>
                </div>
            </RzLink>
        </NavigationMenuLink>
    </li>;
}