{
  "name": "NavigationMenu",
  "category": "Navigation",
  "subcategory": null,
  "description": "Top-level site nav with animated dropdown panels.",
  "thumbnail": "/preview-cards/navigation-menu.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/NavigationMenu/NavigationMenu.razor",
    "UI/NavigationMenu/NavigationMenuContent.razor",
    "UI/NavigationMenu/NavigationMenuHamburger.razor",
    "UI/NavigationMenu/NavigationMenuIndicator.razor",
    "UI/NavigationMenu/NavigationMenuItem.razor",
    "UI/NavigationMenu/NavigationMenuLink.razor",
    "UI/NavigationMenu/NavigationMenuList.razor",
    "UI/NavigationMenu/NavigationMenuMobile.razor",
    "UI/NavigationMenu/NavigationMenuTrigger.razor",
    "UI/NavigationMenu/NavigationMenuViewport.razor"
  ],
  "dependencies": [
    "sheet"
  ],
  "packageDependencies": [
    "Blazicons.Lucide"
  ],
  "cssVars": [
    "--color-accent",
    "--color-accent-foreground",
    "--color-background",
    "--color-border",
    "--color-popover",
    "--color-popover-foreground",
    "--radius"
  ],
  "api": {
    "name": "NavigationMenu",
    "category": "Navigation",
    "subcategory": null,
    "description": "Top-level site nav with animated dropdown panels.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/NavigationMenu/NavigationMenu.razor",
      "UI/NavigationMenu/NavigationMenuContent.razor",
      "UI/NavigationMenu/NavigationMenuHamburger.razor",
      "UI/NavigationMenu/NavigationMenuIndicator.razor",
      "UI/NavigationMenu/NavigationMenuItem.razor",
      "UI/NavigationMenu/NavigationMenuLink.razor",
      "UI/NavigationMenu/NavigationMenuList.razor",
      "UI/NavigationMenu/NavigationMenuMobile.razor",
      "UI/NavigationMenu/NavigationMenuTrigger.razor",
      "UI/NavigationMenu/NavigationMenuViewport.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [],
    "enums": [],
    "records": [
      {
        "name": "NavigationMenuContext",
        "signature": "NavigationMenuContext(string? ActiveItemId, EventCallback<string?> SetActiveItemId)",
        "description": null
      }
    ],
    "cssVars": [
      "--color-accent",
      "--color-accent-foreground",
      "--color-background",
      "--color-border",
      "--color-popover",
      "--color-popover-foreground",
      "--radius"
    ],
    "examples": [
      {
        "title": "Default",
        "code": "<NavigationMenu>\n    <NavigationMenuList>\n        <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n                <div class=\"grid gap-3 w-[400px] md:grid-cols-2\">\n                    <NavigationMenuLink Href=\"#\">\n                        <Lumeo.Text Size=\"sm\" Weight=\"medium\">Introduction</Lumeo.Text>\n                        <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"mt-1\">\n                            Learn the basics of building with Lumeo.\n                        </Lumeo.Text>\n                    </NavigationMenuLink>\n                    <NavigationMenuLink Href=\"#\">\n                        <Lumeo.Text Size=\"sm\" Weight=\"medium\">Installation</Lumeo.Text>\n                        <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"mt-1\">\n                            Add Lumeo to your Blazor project.\n                        </Lumeo.Text>\n                    </NavigationMenuLink>\n                </div>\n            </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n                <div class=\"grid gap-3 w-[400px] md:grid-cols-2\">\n                    <NavigationMenuLink Href=\"#\">\n                        <Lumeo.Text Size=\"sm\" Weight=\"medium\">Button</Lumeo.Text>\n                        <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"mt-1\">\n                            Trigger actions or navigation events.\n                        </Lumeo.Text>\n                    </NavigationMenuLink>\n                </div>\n            </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n            <NavigationMenuLink Href=\"#\">\n                Documentation\n            </NavigationMenuLink>\n        </NavigationMenuItem>\n    </NavigationMenuList>\n</NavigationMenu>"
      },
      {
        "title": "Simple Links",
        "code": "<NavigationMenu>\n    <NavigationMenuList>\n        <NavigationMenuItem>\n            <NavigationMenuLink Href=\"#\" Class=\"...\">Home</NavigationMenuLink>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n            <NavigationMenuLink Href=\"#\" Class=\"...\">About</NavigationMenuLink>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n            <NavigationMenuLink Href=\"#\" Class=\"...\">Blog</NavigationMenuLink>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n            <NavigationMenuLink Href=\"#\" Class=\"...\">Contact</NavigationMenuLink>\n        </NavigationMenuItem>\n    </NavigationMenuList>\n</NavigationMenu>"
      },
      {
        "title": "With Badge",
        "code": "<NavigationMenu>\n    <NavigationMenuList>\n        <NavigationMenuItem>\n            <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n            <NavigationMenuContent>\n                <NavigationMenuLink Href=\"#\">\n                    <Flex Align=\"center\" Gap=\"2\">\n                        <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">Analytics</Lumeo.Text>\n                        <Badge>New</Badge>\n                    </Flex>\n                </NavigationMenuLink>\n                <NavigationMenuLink Href=\"#\">\n                    <Flex Align=\"center\" Gap=\"2\">\n                        <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">API</Lumeo.Text>\n                        <Badge Variant=\"Badge.BadgeVariant.Secondary\">Beta</Badge>\n                    </Flex>\n                </NavigationMenuLink>\n            </NavigationMenuContent>\n        </NavigationMenuItem>\n    </NavigationMenuList>\n</NavigationMenu>"
      }
    ],
    "subComponents": {
      "NavigationMenuContent": {
        "componentName": "NavigationMenuContent",
        "fileName": "NavigationMenuContent.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [
          "IAsyncDisposable"
        ],
        "parameters": [
          {
            "name": "Context",
            "type": "NavigationMenu.NavigationMenuContext",
            "default": "default!",
            "description": null,
            "isCascading": true,
            "captureUnmatched": false
          },
          {
            "name": "ItemContext",
            "type": "NavigationMenuItem.NavigationMenuItemContext",
            "default": "default!",
            "description": null,
            "isCascading": true,
            "captureUnmatched": false
          },
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "NavigationMenuHamburger": {
        "componentName": "NavigationMenuHamburger",
        "fileName": "NavigationMenuHamburger.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Open",
            "type": "bool",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "OpenChanged",
            "type": "EventCallback<bool>",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "IsOpen",
            "type": "bool",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "IsOpenChanged",
            "type": "EventCallback<bool>",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [
          {
            "name": "OpenChanged",
            "type": "EventCallback<bool>",
            "description": null
          },
          {
            "name": "IsOpenChanged",
            "type": "EventCallback<bool>",
            "description": null
          }
        ],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "NavigationMenuIndicator": {
        "componentName": "NavigationMenuIndicator",
        "fileName": "NavigationMenuIndicator.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Context",
            "type": "NavigationMenu.NavigationMenuContext",
            "default": "default!",
            "description": null,
            "isCascading": true,
            "captureUnmatched": false
          },
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "NavigationMenuItem": {
        "componentName": "NavigationMenuItem",
        "fileName": "NavigationMenuItem.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [
          "IDisposable"
        ],
        "parameters": [
          {
            "name": "Context",
            "type": "NavigationMenu.NavigationMenuContext",
            "default": "default!",
            "description": null,
            "isCascading": true,
            "captureUnmatched": false
          },
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [
          {
            "name": "NavigationMenuItemContext",
            "signature": "NavigationMenuItemContext(string ItemId, string TriggerId)",
            "description": null
          }
        ],
        "parseFailed": false,
        "parseError": null
      },
      "NavigationMenuLink": {
        "componentName": "NavigationMenuLink",
        "fileName": "NavigationMenuLink.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Context",
            "type": "NavigationMenu.NavigationMenuContext",
            "default": "default!",
            "description": null,
            "isCascading": true,
            "captureUnmatched": false
          },
          {
            "name": "Href",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "NavigationMenuList": {
        "componentName": "NavigationMenuList",
        "fileName": "NavigationMenuList.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "NavigationMenuMobile": {
        "componentName": "NavigationMenuMobile",
        "fileName": "NavigationMenuMobile.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Open",
            "type": "bool",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "OpenChanged",
            "type": "EventCallback<bool>",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "IsOpen",
            "type": "bool",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "IsOpenChanged",
            "type": "EventCallback<bool>",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [
          {
            "name": "OpenChanged",
            "type": "EventCallback<bool>",
            "description": null
          },
          {
            "name": "IsOpenChanged",
            "type": "EventCallback<bool>",
            "description": null
          }
        ],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "NavigationMenuTrigger": {
        "componentName": "NavigationMenuTrigger",
        "fileName": "NavigationMenuTrigger.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Context",
            "type": "NavigationMenu.NavigationMenuContext",
            "default": "default!",
            "description": null,
            "isCascading": true,
            "captureUnmatched": false
          },
          {
            "name": "ItemContext",
            "type": "NavigationMenuItem.NavigationMenuItemContext",
            "default": "default!",
            "description": null,
            "isCascading": true,
            "captureUnmatched": false
          },
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "NavigationMenuViewport": {
        "componentName": "NavigationMenuViewport",
        "fileName": "NavigationMenuViewport.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Context",
            "type": "NavigationMenu.NavigationMenuContext",
            "default": "default!",
            "description": null,
            "isCascading": true,
            "captureUnmatched": false
          },
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      }
    },
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "navigation-menu",
  "docsUrl": "https://lumeo.nativ.sh/components/navigation-menu",
  "sourceUrl": [
    {
      "file": "UI/NavigationMenu/NavigationMenu.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/NavigationMenu/NavigationMenu.razor"
    },
    {
      "file": "UI/NavigationMenu/NavigationMenuContent.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/NavigationMenu/NavigationMenuContent.razor"
    },
    {
      "file": "UI/NavigationMenu/NavigationMenuHamburger.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/NavigationMenu/NavigationMenuHamburger.razor"
    },
    {
      "file": "UI/NavigationMenu/NavigationMenuIndicator.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/NavigationMenu/NavigationMenuIndicator.razor"
    },
    {
      "file": "UI/NavigationMenu/NavigationMenuItem.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/NavigationMenu/NavigationMenuItem.razor"
    },
    {
      "file": "UI/NavigationMenu/NavigationMenuLink.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/NavigationMenu/NavigationMenuLink.razor"
    },
    {
      "file": "UI/NavigationMenu/NavigationMenuList.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/NavigationMenu/NavigationMenuList.razor"
    },
    {
      "file": "UI/NavigationMenu/NavigationMenuMobile.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/NavigationMenu/NavigationMenuMobile.razor"
    },
    {
      "file": "UI/NavigationMenu/NavigationMenuTrigger.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/NavigationMenu/NavigationMenuTrigger.razor"
    },
    {
      "file": "UI/NavigationMenu/NavigationMenuViewport.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/NavigationMenu/NavigationMenuViewport.razor"
    }
  ],
  "source": [
    {
      "path": "UI/NavigationMenu/NavigationMenu.razor",
      "content": "@namespace Lumeo\n\n@{\n    var context = new NavigationMenuContext(_activeItemId, EventCallback.Factory.Create<string?>(this, SetActiveItemId));\n}\n\n<nav class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    <CascadingValue Value=\"context\" IsFixed=\"false\">\n        @ChildContent\n    </CascadingValue>\n</nav>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string? _activeItemId;\n\n    private string CssClass => $\"relative z-10 flex max-w-max flex-1 items-center justify-center {Class}\".Trim();\n\n    private Task SetActiveItemId(string? value)\n    {\n        _activeItemId = value;\n        StateHasChanged();\n        return Task.CompletedTask;\n    }\n\n    public record NavigationMenuContext(string? ActiveItemId, EventCallback<string?> SetActiveItemId);\n}\n"
    },
    {
      "path": "UI/NavigationMenu/NavigationMenuContent.razor",
      "content": "@namespace Lumeo\n@implements IAsyncDisposable\n\n@if (Context.ActiveItemId == ItemContext.ItemId)\n{\n    <div id=\"@_contentId\" class=\"@CssClass\" @onkeydown=\"HandleKeyDown\" tabindex=\"-1\" @attributes=\"AdditionalAttributes\">\n        <div class=\"@InnerCssClass\">\n            @ChildContent\n        </div>\n    </div>\n}\n\n@inject ComponentInteropService Interop\n\n@code {\n    [CascadingParameter] public NavigationMenu.NavigationMenuContext Context { get; set; } = default!;\n    [CascadingParameter] public NavigationMenuItem.NavigationMenuItemContext ItemContext { get; set; } = default!;\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private readonly string _contentId = $\"nav-content-{Guid.NewGuid():N}\";\n    private bool _registered;\n\n    private string CssClass => $\"fixed z-50 animate-fade-in {Class}\".Trim();\n\n    private string InnerCssClass => \"mt-1.5 min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-lg\";\n\n    protected override async Task OnAfterRenderAsync(bool firstRender)\n    {\n        if (Context.ActiveItemId == ItemContext.ItemId && !_registered)\n        {\n            await Interop.PositionFixed(_contentId, ItemContext.TriggerId, \"start\");\n            await Interop.RegisterClickOutside(_contentId, ItemContext.TriggerId, async () =>\n            {\n                await Context.SetActiveItemId.InvokeAsync(null);\n                await InvokeAsync(StateHasChanged);\n            });\n            _registered = true;\n        }\n        else if (Context.ActiveItemId != ItemContext.ItemId && _registered)\n        {\n            await Cleanup();\n        }\n    }\n\n    private async Task HandleKeyDown(KeyboardEventArgs e)\n    {\n        if (e.Key == \"Escape\")\n        {\n            await Context.SetActiveItemId.InvokeAsync(null);\n        }\n    }\n\n    private async Task Cleanup()\n    {\n        try { await Interop.UnpositionFixed(_contentId); } catch (JSDisconnectedException) { }\n        try { await Interop.UnregisterClickOutside(_contentId); } catch (JSDisconnectedException) { }\n        _registered = false;\n    }\n\n    public async ValueTask DisposeAsync()\n    {\n        if (_registered) await Cleanup();\n    }\n}\n"
    },
    {
      "path": "UI/NavigationMenu/NavigationMenuHamburger.razor",
      "content": "@namespace Lumeo\n\n<button type=\"button\" class=\"@CssClass\" @onclick=\"Toggle\" aria-label=\"Toggle navigation\" @attributes=\"AdditionalAttributes\">\n    <Blazicon Svg=\"Lucide.Menu\" class=\"h-5 w-5\" />\n</button>\n\n@code {\n    [Parameter] public bool Open { get; set; }\n    [Parameter] public EventCallback<bool> OpenChanged { get; set; }\n\n    [Obsolete(\"Use Open instead. IsOpen will be removed in a future release.\")]\n    [Parameter] public bool IsOpen { get => Open; set => Open = value; }\n\n    [Obsolete(\"Use OpenChanged instead. IsOpenChanged will be removed in a future release.\")]\n    [Parameter] public EventCallback<bool> IsOpenChanged { get => OpenChanged; set => OpenChanged = value; }\n\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"inline-flex items-center justify-center rounded-md p-2 hover:bg-accent hover:text-accent-foreground md:hidden {Class}\".Trim();\n\n    private async Task Toggle()\n    {\n        Open = !Open;\n        await OpenChanged.InvokeAsync(Open);\n    }\n}\n"
    },
    {
      "path": "UI/NavigationMenu/NavigationMenuIndicator.razor",
      "content": "@namespace Lumeo\n\n@if (Context.ActiveItemId is not null)\n{\n    <div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n        <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\"></div>\n    </div>\n}\n\n@code {\n    [CascadingParameter] public NavigationMenu.NavigationMenuContext Context { get; set; } = default!;\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"absolute bottom-0 z-[1] flex h-1.5 items-end justify-center overflow-hidden {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/NavigationMenu/NavigationMenuItem.razor",
      "content": "@namespace Lumeo\n@implements IDisposable\n\n@{\n    var itemContext = new NavigationMenuItemContext(_itemId, _triggerId);\n}\n\n<CascadingValue Value=\"itemContext\" IsFixed=\"true\">\n    <li class=\"@CssClass\"\n        @onpointerenter=\"HandlePointerEnter\"\n        @onpointerleave=\"HandlePointerLeave\"\n        @attributes=\"AdditionalAttributes\">\n        @ChildContent\n    </li>\n</CascadingValue>\n\n@code {\n    [CascadingParameter] public NavigationMenu.NavigationMenuContext Context { get; set; } = default!;\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private readonly string _itemId = $\"nav-item-{Guid.NewGuid():N}\";\n    private readonly string _triggerId = $\"nav-trigger-{Guid.NewGuid():N}\";\n    private readonly DelayedDispatch _dispatch = new();\n    private const int CloseDelay = 150;\n\n    private string CssClass => $\"relative {Class}\".Trim();\n\n    // rc.44 — Approach B: pointer events with PointerType filter. On touch\n    // devices the browser emulates `mouseenter` on tap and `mouseleave` when\n    // the finger lifts — closing the submenu before the user can interact\n    // with it. Only fire hover behavior for mouse pointers; touch users rely\n    // on the explicit @onclick toggle in NavigationMenuTrigger.\n    private void HandlePointerEnter(PointerEventArgs e)\n    {\n        if (e.PointerType != \"mouse\") return;\n        _dispatch.Cancel();\n    }\n\n    private void HandlePointerLeave(PointerEventArgs e)\n    {\n        if (e.PointerType != \"mouse\") return;\n        if (Context.ActiveItemId == _itemId)\n        {\n            _dispatch.Schedule(CloseDelay, () => InvokeAsync(async () =>\n            {\n                if (Context.ActiveItemId == _itemId)\n                {\n                    await Context.SetActiveItemId.InvokeAsync(null);\n                    StateHasChanged();\n                }\n            }));\n        }\n    }\n\n    public void Dispose() => _dispatch.Dispose();\n\n    public record NavigationMenuItemContext(string ItemId, string TriggerId);\n}\n"
    },
    {
      "path": "UI/NavigationMenu/NavigationMenuLink.razor",
      "content": "@namespace Lumeo\n\n<a href=\"@Href\" class=\"@CssClass\" @onclick=\"HandleClick\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</a>\n\n@code {\n    [CascadingParameter] public NavigationMenu.NavigationMenuContext Context { get; set; } = default!;\n    [Parameter] public string? Href { get; set; }\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"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 {Class}\".Trim();\n\n    private async Task HandleClick()\n    {\n        await Context.SetActiveItemId.InvokeAsync(null);\n    }\n}\n"
    },
    {
      "path": "UI/NavigationMenu/NavigationMenuList.razor",
      "content": "@namespace Lumeo\n\n<ul class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</ul>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"group flex flex-1 list-none items-center justify-center space-x-1 {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/NavigationMenu/NavigationMenuMobile.razor",
      "content": "@namespace Lumeo\n\n<Sheet @bind-Open=\"Open\">\n    <SheetContent Side=\"SheetContent.SheetSide.Left\" Class=\"w-72 p-0\">\n        <div class=\"flex flex-col gap-2 p-4\">\n            @ChildContent\n        </div>\n    </SheetContent>\n</Sheet>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public bool Open { get; set; }\n    [Parameter] public EventCallback<bool> OpenChanged { get; set; }\n\n    [Obsolete(\"Use Open instead. IsOpen will be removed in a future release.\")]\n    [Parameter] public bool IsOpen { get => Open; set => Open = value; }\n\n    [Obsolete(\"Use OpenChanged instead. IsOpenChanged will be removed in a future release.\")]\n    [Parameter] public EventCallback<bool> IsOpenChanged { get => OpenChanged; set => OpenChanged = value; }\n\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n}\n"
    },
    {
      "path": "UI/NavigationMenu/NavigationMenuTrigger.razor",
      "content": "@namespace Lumeo\n\n<button id=\"@ItemContext.TriggerId\"\n        type=\"button\"\n        class=\"@CssClass\"\n        @onclick=\"HandleClick\"\n        @onpointerenter=\"HandlePointerEnter\"\n        @attributes=\"AdditionalAttributes\">\n    @ChildContent\n    <Blazicon Svg=\"Lucide.ChevronDown\" class=\"@ChevronClasses\" />\n</button>\n\n@code {\n    [CascadingParameter] public NavigationMenu.NavigationMenuContext Context { get; set; } = default!;\n    [CascadingParameter] public NavigationMenuItem.NavigationMenuItemContext ItemContext { get; set; } = default!;\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private bool IsActive => Context.ActiveItemId == ItemContext.ItemId;\n\n    private string CssClass => string.Join(\" \", new[] { \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50\", IsActive ? \"bg-accent/50\" : null, Class }.Where(s => !string.IsNullOrWhiteSpace(s)));\n\n    private string ChevronClasses => string.Join(\" \", new[] { \"relative top-[1px] ml-1 h-3 w-3 transition-transform duration-200\", IsActive ? \"rotate-180\" : null }.Where(s => !string.IsNullOrWhiteSpace(s)));\n\n    private async Task HandleClick()\n    {\n        if (IsActive)\n        {\n            await Context.SetActiveItemId.InvokeAsync(null);\n        }\n        else\n        {\n            await Context.SetActiveItemId.InvokeAsync(ItemContext.ItemId);\n        }\n    }\n\n    // rc.44 — only auto-open for mouse pointers. On touch devices the browser\n    // emulates pointerenter on tap; combined with the parent's hover-leave on\n    // finger-lift, this would briefly flash the submenu before closing it.\n    // Touch users open via @onclick.\n    private async Task HandlePointerEnter(PointerEventArgs e)\n    {\n        if (e.PointerType != \"mouse\") return;\n        await Context.SetActiveItemId.InvokeAsync(ItemContext.ItemId);\n    }\n}\n"
    },
    {
      "path": "UI/NavigationMenu/NavigationMenuViewport.razor",
      "content": "@namespace Lumeo\n\n@if (Context.ActiveItemId is not null)\n{\n    <div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n        <div class=\"@InnerCssClass\">\n            @ChildContent\n        </div>\n    </div>\n}\n\n@code {\n    [CascadingParameter] public NavigationMenu.NavigationMenuContext Context { get; set; } = default!;\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"absolute left-0 top-full flex justify-center {Class}\".Trim();\n\n    private string InnerCssClass => \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-lg animate-fade-in\";\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "NavigationMenu",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "NavigationMenuContent",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "NavigationMenuIndicator",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "NavigationMenuItem",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "NavigationMenuLink",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "NavigationMenuList",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "NavigationMenuMobile",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "NavigationMenuTrigger",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "NavigationMenuViewport",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [
    {
      "service": "ComponentInteropService",
      "namespace": ""
    }
  ],
  "cascadingDependencies": [
    {
      "name": "Context",
      "type": "NavigationMenu.NavigationMenuContext",
      "required": true
    },
    {
      "name": "ItemContext",
      "type": "NavigationMenuItem.NavigationMenuItemContext",
      "required": true
    }
  ],
  "relatedComponents": [
    {
      "name": "NavigationMenuContent",
      "reason": "sub-component"
    },
    {
      "name": "NavigationMenuHamburger",
      "reason": "sub-component"
    },
    {
      "name": "NavigationMenuIndicator",
      "reason": "sub-component"
    },
    {
      "name": "NavigationMenuItem",
      "reason": "sub-component"
    },
    {
      "name": "NavigationMenuLink",
      "reason": "sub-component"
    },
    {
      "name": "NavigationMenuList",
      "reason": "sub-component"
    },
    {
      "name": "NavigationMenuMobile",
      "reason": "sub-component"
    },
    {
      "name": "NavigationMenuTrigger",
      "reason": "sub-component"
    },
    {
      "name": "NavigationMenuViewport",
      "reason": "sub-component"
    },
    {
      "name": "Sheet",
      "reason": "used internally"
    }
  ],
  "keyboardInteractions": [
    {
      "key": "Escape",
      "action": "HandleKeyDown handles Escape in NavigationMenuContent.razor"
    }
  ],
  "tests": [
    "tests/Lumeo.Tests/Components/NavigationMenu/NavigationMenuTests.cs"
  ],
  "mdSummary": "# NavigationMenu\n\nTop-level site nav with animated dropdown panels.\n\n**Package:** `Lumeo` · **Category:** Navigation\n**Docs:** https://lumeo.nativ.sh/components/navigation-menu\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| NavigationMenu | ChildContent | `RenderFragment?` | `` |  |\n| NavigationMenu | Class | `string?` | `` |  |\n| NavigationMenu | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| NavigationMenuContent | Context | `NavigationMenu.NavigationMenuContext` | `default!` |  |\n| NavigationMenuContent | ItemContext | `NavigationMenuItem.NavigationMenuItemContext` | `default!` |  |\n| NavigationMenuContent | ChildContent | `RenderFragment?` | `` |  |\n| NavigationMenuContent | Class | `string?` | `` |  |\n| NavigationMenuContent | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| NavigationMenuHamburger | Open | `bool` | `` |  |\n| NavigationMenuHamburger | OpenChanged | `EventCallback<bool>` | `` |  |\n| NavigationMenuHamburger | IsOpen | `bool` | `` |  |\n| NavigationMenuHamburger | IsOpenChanged | `EventCallback<bool>` | `` |  |\n| NavigationMenuHamburger | Class | `string?` | `` |  |\n| NavigationMenuHamburger | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| NavigationMenuIndicator | Context | `NavigationMenu.NavigationMenuContext` | `default!` |  |\n| NavigationMenuIndicator | ChildContent | `RenderFragment?` | `` |  |\n| NavigationMenuIndicator | Class | `string?` | `` |  |\n| NavigationMenuIndicator | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| NavigationMenuItem | Context | `NavigationMenu.NavigationMenuContext` | `default!` |  |\n| NavigationMenuItem | ChildContent | `RenderFragment?` | `` |  |\n| NavigationMenuItem | Class | `string?` | `` |  |\n| NavigationMenuItem | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| NavigationMenuLink | Context | `NavigationMenu.NavigationMenuContext` | `default!` |  |\n| NavigationMenuLink | Href | `string?` | `` |  |\n| NavigationMenuLink | ChildContent | `RenderFragment?` | `` |  |\n| NavigationMenuLink | Class | `string?` | `` |  |\n| NavigationMenuLink | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| NavigationMenuList | ChildContent | `RenderFragment?` | `` |  |\n| NavigationMenuList | Class | `string?` | `` |  |\n| NavigationMenuList | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| NavigationMenuMobile | ChildContent | `RenderFragment?` | `` |  |\n| NavigationMenuMobile | Open | `bool` | `` |  |\n| NavigationMenuMobile | OpenChanged | `EventCallback<bool>` | `` |  |\n| NavigationMenuMobile | IsOpen | `bool` | `` |  |\n| NavigationMenuMobile | IsOpenChanged | `EventCallback<bool>` | `` |  |\n| NavigationMenuMobile | Class | `string?` | `` |  |\n| NavigationMenuMobile | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| NavigationMenuTrigger | Context | `NavigationMenu.NavigationMenuContext` | `default!` |  |\n| NavigationMenuTrigger | ItemContext | `NavigationMenuItem.NavigationMenuItemContext` | `default!` |  |\n| NavigationMenuTrigger | ChildContent | `RenderFragment?` | `` |  |\n| NavigationMenuTrigger | Class | `string?` | `` |  |\n| NavigationMenuTrigger | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| NavigationMenuViewport | Context | `NavigationMenu.NavigationMenuContext` | `default!` |  |\n| NavigationMenuViewport | ChildContent | `RenderFragment?` | `` |  |\n| NavigationMenuViewport | Class | `string?` | `` |  |\n| NavigationMenuViewport | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (NavigationMenu) — RenderFragment slot\n- `ChildContent` (NavigationMenuContent) — RenderFragment slot\n- `ChildContent` (NavigationMenuIndicator) — RenderFragment slot\n- `ChildContent` (NavigationMenuItem) — RenderFragment slot\n- `ChildContent` (NavigationMenuLink) — RenderFragment slot\n- `ChildContent` (NavigationMenuList) — RenderFragment slot\n- `ChildContent` (NavigationMenuMobile) — RenderFragment slot\n- `ChildContent` (NavigationMenuTrigger) — RenderFragment slot\n- `ChildContent` (NavigationMenuViewport) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- `NavigationMenuContent`, `NavigationMenuHamburger`, `NavigationMenuIndicator`, `NavigationMenuItem`, `NavigationMenuLink`, `NavigationMenuList`, `NavigationMenuMobile`, `NavigationMenuTrigger`, `NavigationMenuViewport`\n\n## Cascading values it expects\n- `Context` (`NavigationMenu.NavigationMenuContext`)\n- `ItemContext` (`NavigationMenuItem.NavigationMenuItemContext`)\n\n## Services it injects\n- `ComponentInteropService` ()\n\n## Keyboard\n- `Escape` — HandleKeyDown handles Escape in NavigationMenuContent.razor\n\n## Example\n```razor\n<NavigationMenu />\n```\n\n## CSS variables\n`--color-accent`, `--color-accent-foreground`, `--color-background`, `--color-border`, `--color-popover`, `--color-popover-foreground`, `--radius`\n\n## Files\n- `UI/NavigationMenu/NavigationMenu.razor`\n- `UI/NavigationMenu/NavigationMenuContent.razor`\n- `UI/NavigationMenu/NavigationMenuHamburger.razor`\n- `UI/NavigationMenu/NavigationMenuIndicator.razor`\n- `UI/NavigationMenu/NavigationMenuItem.razor`\n- `UI/NavigationMenu/NavigationMenuLink.razor`\n- `UI/NavigationMenu/NavigationMenuList.razor`\n- `UI/NavigationMenu/NavigationMenuMobile.razor`\n- `UI/NavigationMenu/NavigationMenuTrigger.razor`\n- `UI/NavigationMenu/NavigationMenuViewport.razor`\n"
}