{
  "name": "MegaMenu",
  "category": "Navigation",
  "subcategory": null,
  "description": "Full-width dropdown for site-wide navigation with columns.",
  "thumbnail": "/preview-cards/mega-menu.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/MegaMenu/MegaMenu.razor",
    "UI/MegaMenu/MegaMenuGroup.razor",
    "UI/MegaMenu/MegaMenuItem.razor",
    "UI/MegaMenu/MegaMenuLink.razor",
    "UI/MegaMenu/MegaMenuPanel.razor"
  ],
  "dependencies": [],
  "packageDependencies": [
    "Blazicons.Lucide"
  ],
  "cssVars": [
    "--color-accent",
    "--color-accent-foreground",
    "--color-border",
    "--color-foreground",
    "--color-muted",
    "--color-muted-foreground",
    "--color-popover",
    "--radius"
  ],
  "api": {
    "name": "MegaMenu",
    "category": "Navigation",
    "subcategory": null,
    "description": "Full-width dropdown for site-wide navigation with columns.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/MegaMenu/MegaMenu.razor",
      "UI/MegaMenu/MegaMenuGroup.razor",
      "UI/MegaMenu/MegaMenuItem.razor",
      "UI/MegaMenu/MegaMenuLink.razor",
      "UI/MegaMenu/MegaMenuPanel.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Orientation",
        "type": "MegaMenuOrientation",
        "default": "MegaMenuOrientation.Horizontal",
        "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": [
      {
        "name": "MegaMenuOrientation",
        "values": [
          "Horizontal",
          "Vertical"
        ],
        "description": null
      }
    ],
    "records": [
      {
        "name": "MegaMenuContext",
        "signature": "MegaMenuContext(string? ActiveItemId, EventCallback<string?> SetActiveItemId)",
        "description": null
      }
    ],
    "cssVars": [
      "--color-accent",
      "--color-accent-foreground",
      "--color-border",
      "--color-foreground",
      "--color-muted",
      "--color-muted-foreground",
      "--color-popover",
      "--radius"
    ],
    "examples": [
      {
        "title": "Basic Mega Menu",
        "code": "<MegaMenu>\n    <MegaMenuItem Label=\"Products\">\n        <MegaMenuPanel Columns=\"3\">\n            <MegaMenuGroup Title=\"Design\">\n                <MegaMenuLink Href=\"/components\" Title=\"Components\" Description=\"Pre-built UI components\" />\n                <MegaMenuLink Href=\"/templates\" Title=\"Templates\" Description=\"Starter templates\" />\n            </MegaMenuGroup>\n            <MegaMenuGroup Title=\"Development\">\n                <MegaMenuLink Href=\"/docs\" Title=\"Documentation\" Description=\"Full API reference\" />\n            </MegaMenuGroup>\n        </MegaMenuPanel>\n    </MegaMenuItem>\n    <MegaMenuItem Label=\"Pricing\" Href=\"/pricing\" />\n</MegaMenu>"
      },
      {
        "title": "Single Column Panel",
        "code": "<MegaMenu>\n    <MegaMenuItem Label=\"Company\">\n        <MegaMenuPanel Columns=\"1\" FullWidth=\"false\">\n            <MegaMenuGroup>\n                <MegaMenuLink Href=\"/about\" Title=\"About Us\" />\n                <MegaMenuLink Href=\"/careers\" Title=\"Careers\" />\n            </MegaMenuGroup>\n        </MegaMenuPanel>\n    </MegaMenuItem>\n</MegaMenu>"
      },
      {
        "title": "Orientation — interactive",
        "code": "<Segmented @bind-Value=\"_orientationSel\" Options=\"_orientationOptions\" />\n<MegaMenu Orientation=\"@_activeMegaMenuOrientation\">\n    <MegaMenuItem Label=\"Products\">\n        <MegaMenuPanel Columns=\"2\">\n            <MegaMenuGroup Title=\"Design\">\n                <MegaMenuLink Href=\"#\" Title=\"Components\" Description=\"Pre-built UI components\" />\n            </MegaMenuGroup>\n            <MegaMenuGroup Title=\"Development\">\n                <MegaMenuLink Href=\"#\" Title=\"CLI\" Description=\"Command-line tooling\" />\n            </MegaMenuGroup>\n        </MegaMenuPanel>\n    </MegaMenuItem>\n    <MegaMenuItem Label=\"Docs\" Href=\"#\" />\n</MegaMenu>\n\n@code {\n    private string _orientationSel = \"Horizontal\";\n    private MegaMenu.MegaMenuOrientation _activeMegaMenuOrientation =>\n        Enum.Parse<MegaMenu.MegaMenuOrientation>(_orientationSel);\n    private List<Segmented.SegmentedOption> _orientationOptions = new()\n    {\n        new() { Label = \"Horizontal\", Value = \"Horizontal\" },\n        new() { Label = \"Vertical\", Value = \"Vertical\" },\n    };\n}"
      }
    ],
    "subComponents": {
      "MegaMenuGroup": {
        "componentName": "MegaMenuGroup",
        "fileName": "MegaMenuGroup.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Title",
            "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
      },
      "MegaMenuItem": {
        "componentName": "MegaMenuItem",
        "fileName": "MegaMenuItem.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [
          "IDisposable"
        ],
        "parameters": [
          {
            "name": "Context",
            "type": "MegaMenu.MegaMenuContext",
            "default": "default!",
            "description": null,
            "isCascading": true,
            "captureUnmatched": false
          },
          {
            "name": "Label",
            "type": "string",
            "default": "string.Empty",
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Icon",
            "type": "SvgIcon?",
            "default": null,
            "description": null,
            "isCascading": false,
            "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": "Disabled",
            "type": "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": [],
        "enums": [],
        "records": [
          {
            "name": "MegaMenuItemContext",
            "signature": "MegaMenuItemContext(string ItemId, string TriggerId)",
            "description": null
          }
        ],
        "parseFailed": false,
        "parseError": null
      },
      "MegaMenuLink": {
        "componentName": "MegaMenuLink",
        "fileName": "MegaMenuLink.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Href",
            "type": "string",
            "default": "\"#\"",
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Title",
            "type": "string",
            "default": "string.Empty",
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Description",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Icon",
            "type": "SvgIcon?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Disabled",
            "type": "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": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "MegaMenuPanel": {
        "componentName": "MegaMenuPanel",
        "fileName": "MegaMenuPanel.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "FullWidth",
            "type": "bool",
            "default": "true",
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Columns",
            "type": "int",
            "default": "4",
            "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": "mega-menu",
  "docsUrl": "https://lumeo.nativ.sh/components/mega-menu",
  "sourceUrl": [
    {
      "file": "UI/MegaMenu/MegaMenu.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/MegaMenu/MegaMenu.razor"
    },
    {
      "file": "UI/MegaMenu/MegaMenuGroup.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/MegaMenu/MegaMenuGroup.razor"
    },
    {
      "file": "UI/MegaMenu/MegaMenuItem.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/MegaMenu/MegaMenuItem.razor"
    },
    {
      "file": "UI/MegaMenu/MegaMenuLink.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/MegaMenu/MegaMenuLink.razor"
    },
    {
      "file": "UI/MegaMenu/MegaMenuPanel.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/MegaMenu/MegaMenuPanel.razor"
    }
  ],
  "source": [
    {
      "path": "UI/MegaMenu/MegaMenu.razor",
      "content": "@namespace Lumeo\n\n@{\n    var context = new MegaMenuContext(_activeItemId, EventCallback.Factory.Create<string?>(this, SetActiveItemId));\n}\n\n<nav class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    <CascadingValue Value=\"context\" IsFixed=\"false\">\n        <ul class=\"@ListCssClass\" role=\"menubar\">\n            @ChildContent\n        </ul>\n    </CascadingValue>\n</nav>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public MegaMenuOrientation Orientation { get; set; } = MegaMenuOrientation.Horizontal;\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 {Class}\".Trim();\n\n    private string ListCssClass => Orientation == MegaMenuOrientation.Vertical\n        ? \"flex flex-col gap-1\"\n        : \"flex items-center gap-1\";\n\n    private Task SetActiveItemId(string? value)\n    {\n        _activeItemId = value;\n        StateHasChanged();\n        return Task.CompletedTask;\n    }\n\n    public enum MegaMenuOrientation { Horizontal, Vertical }\n\n    public record MegaMenuContext(string? ActiveItemId, EventCallback<string?> SetActiveItemId);\n}\n"
    },
    {
      "path": "UI/MegaMenu/MegaMenuGroup.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @if (Title is not null)\n    {\n        <h4 class=\"text-sm font-semibold text-foreground mb-3\">@Title</h4>\n    }\n    <ul class=\"space-y-1\" role=\"group\">\n        @ChildContent\n    </ul>\n</div>\n\n@code {\n    [Parameter] public string? Title { 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 => $\"{Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/MegaMenu/MegaMenuItem.razor",
      "content": "@namespace Lumeo\n@using Lumeo.Services\n@implements IDisposable\n\n@{\n    var itemContext = new MegaMenuItemContext(_itemId, _triggerId);\n}\n\n<CascadingValue Value=\"itemContext\" IsFixed=\"false\">\n    @if (ChildContent is null && Href is not null)\n    {\n        <li role=\"none\" class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n            <a href=\"@Href\"\n               role=\"menuitem\"\n               class=\"@TriggerCssClass\">\n                @if (Icon is not null)\n                {\n                    <Blazicon Svg=\"@Icon\" class=\"h-4 w-4\" />\n                }\n                @Label\n            </a>\n        </li>\n    }\n    else\n    {\n        <li role=\"none\"\n            class=\"@CssClass\"\n            @onpointerenter=\"HandlePointerEnter\"\n            @onpointerleave=\"HandlePointerLeave\"\n            @attributes=\"AdditionalAttributes\">\n            <button id=\"@_triggerId\"\n                    type=\"button\"\n                    role=\"menuitem\"\n                    aria-haspopup=\"true\"\n                    aria-expanded=\"@(_isOpen ? \"true\" : \"false\")\"\n                    disabled=\"@Disabled\"\n                    class=\"@TriggerCssClass\"\n                    @onclick=\"HandleClick\"\n                    @onkeydown=\"HandleKeyDown\">\n                @if (Icon is not null)\n                {\n                    <Blazicon Svg=\"@Icon\" class=\"h-4 w-4\" />\n                }\n                @Label\n                <Blazicon Svg=\"Lucide.ChevronDown\" class=\"@ChevronCssClass\" />\n            </button>\n            @if (_isOpen)\n            {\n                @ChildContent\n            }\n        </li>\n    }\n</CascadingValue>\n\n@code {\n    [CascadingParameter] public MegaMenu.MegaMenuContext Context { get; set; } = default!;\n    [Parameter] public string Label { get; set; } = string.Empty;\n    [Parameter] public SvgIcon? Icon { get; set; }\n    [Parameter] public string? Href { get; set; }\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public bool Disabled { 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 = $\"megamenu-item-{Guid.NewGuid():N}\";\n    private readonly string _triggerId = $\"megamenu-trigger-{Guid.NewGuid():N}\";\n    private readonly DelayedDispatch _dispatch = new();\n    private const int CloseDelay = 150;\n\n    private bool _isOpen => Context?.ActiveItemId == _itemId;\n\n    private string CssClass => Class ?? \"\";\n\n    private string TriggerCssClass => string.Join(\" \", new[] { \"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground rounded-md transition-colors focus:outline-none focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\", _isOpen ? \"bg-accent/50\" : null }.Where(s => !string.IsNullOrWhiteSpace(s)));\n\n    private string ChevronCssClass => string.Join(\" \", new[] { \"h-3 w-3 transition-transform duration-200\", _isOpen ? \"rotate-180\" : null }.Where(s => !string.IsNullOrWhiteSpace(s)));\n\n    // rc.44 — Approach B: pointer events gated to mouse only. Touch devices\n    // open via @onclick on the inner trigger button, avoiding the\n    // tap-emulated-mouseenter / lift-emulated-mouseleave race that would\n    // close the submenu before the user could pick a sub-item.\n    private void HandlePointerEnter(PointerEventArgs e)\n    {\n        if (e.PointerType != \"mouse\") return;\n        _dispatch.Cancel();\n\n        if (!_isOpen)\n        {\n            SafeAsyncDispatcher.FireAndForget(InvokeAsync, async () =>\n            {\n                await Context.SetActiveItemId.InvokeAsync(_itemId);\n                StateHasChanged();\n            }, \"MegaMenuItem.HandlePointerEnter\");\n        }\n    }\n\n    private void HandlePointerLeave(PointerEventArgs e)\n    {\n        if (e.PointerType != \"mouse\") return;\n        if (_isOpen)\n        {\n            _dispatch.Schedule(CloseDelay, () =>\n            {\n                SafeAsyncDispatcher.FireAndForget(InvokeAsync, async () =>\n                {\n                    if (Context.ActiveItemId == _itemId)\n                    {\n                        await Context.SetActiveItemId.InvokeAsync(null);\n                        StateHasChanged();\n                    }\n                }, \"MegaMenuItem.HandlePointerLeave\");\n            });\n        }\n    }\n\n    private async Task HandleClick()\n    {\n        if (_isOpen)\n        {\n            await Context.SetActiveItemId.InvokeAsync(null);\n        }\n        else\n        {\n            await Context.SetActiveItemId.InvokeAsync(_itemId);\n        }\n    }\n\n    private async Task HandleKeyDown(KeyboardEventArgs e)\n    {\n        switch (e.Key)\n        {\n            case \"Enter\":\n            case \" \":\n                await HandleClick();\n                break;\n            case \"Escape\":\n                await Context.SetActiveItemId.InvokeAsync(null);\n                break;\n        }\n    }\n\n    public void Dispose() => _dispatch.Dispose();\n\n    public record MegaMenuItemContext(string ItemId, string TriggerId);\n}\n"
    },
    {
      "path": "UI/MegaMenu/MegaMenuLink.razor",
      "content": "@namespace Lumeo\n\n<li @attributes=\"AdditionalAttributes\">\n    <a href=\"@Href\" class=\"@CssClass\" aria-disabled=\"@(Disabled ? \"true\" : null)\">\n        @if (Icon is not null)\n        {\n            <Blazicon Svg=\"@Icon\" class=\"h-5 w-5 mt-0.5 text-muted-foreground shrink-0\" />\n        }\n        <div>\n            <div class=\"text-sm font-medium text-foreground\">@Title</div>\n            @if (Description is not null)\n            {\n                <p class=\"text-xs text-muted-foreground mt-0.5\">@Description</p>\n            }\n        </div>\n    </a>\n</li>\n\n@code {\n    [Parameter] public string Href { get; set; } = \"#\";\n    [Parameter] public string Title { get; set; } = string.Empty;\n    [Parameter] public string? Description { get; set; }\n    [Parameter] public SvgIcon? Icon { get; set; }\n    [Parameter] public bool Disabled { 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 => string.Join(\" \", new[] { \"flex items-start gap-3 rounded-md p-2 hover:bg-accent transition-colors\", Disabled ? \"pointer-events-none opacity-50\" : null, Class }.Where(s => !string.IsNullOrWhiteSpace(s)));\n}\n"
    },
    {
      "path": "UI/MegaMenu/MegaMenuPanel.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" role=\"menu\" @attributes=\"AdditionalAttributes\">\n    <div class=\"@GridCssClass\">\n        @ChildContent\n    </div>\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public bool FullWidth { get; set; } = true;\n    [Parameter] public int Columns { get; set; } = 4;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string WidthCssClass => FullWidth ? \"left-0 right-0\" : \"w-auto min-w-[600px]\";\n\n    private string CssClass => $\"absolute top-full z-50 {WidthCssClass} bg-popover border border-border/40 rounded-lg shadow-lg p-6 {Class}\".Trim();\n\n    private string GridCssClass => Columns switch {\n        1 => \"grid grid-cols-1 gap-6\",\n        2 => \"grid grid-cols-2 gap-6\",\n        3 => \"grid grid-cols-3 gap-6\",\n        4 => \"grid grid-cols-4 gap-6\",\n        5 => \"grid grid-cols-5 gap-6\",\n        _ => \"grid grid-cols-1 gap-6\"\n    };\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "MegaMenu",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "MegaMenuGroup",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "MegaMenuItem",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "MegaMenuPanel",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [
    {
      "name": "Context",
      "type": "MegaMenu.MegaMenuContext",
      "required": true
    }
  ],
  "relatedComponents": [
    {
      "name": "MegaMenuGroup",
      "reason": "sub-component"
    },
    {
      "name": "MegaMenuItem",
      "reason": "sub-component"
    },
    {
      "name": "MegaMenuLink",
      "reason": "sub-component"
    },
    {
      "name": "MegaMenuPanel",
      "reason": "sub-component"
    }
  ],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/MegaMenu/MegaMenuTests.cs"
  ],
  "mdSummary": "# MegaMenu\n\nFull-width dropdown for site-wide navigation with columns.\n\n**Package:** `Lumeo` · **Category:** Navigation\n**Docs:** https://lumeo.nativ.sh/components/mega-menu\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| MegaMenu | ChildContent | `RenderFragment?` | `` |  |\n| MegaMenu | Orientation | `MegaMenuOrientation` | `MegaMenuOrientation.Horizontal` |  |\n| MegaMenu | Class | `string?` | `` |  |\n| MegaMenu | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| MegaMenuGroup | Title | `string?` | `` |  |\n| MegaMenuGroup | ChildContent | `RenderFragment?` | `` |  |\n| MegaMenuGroup | Class | `string?` | `` |  |\n| MegaMenuGroup | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| MegaMenuItem | Context | `MegaMenu.MegaMenuContext` | `default!` |  |\n| MegaMenuItem | Label | `string` | `string.Empty` |  |\n| MegaMenuItem | Icon | `SvgIcon?` | `` |  |\n| MegaMenuItem | Href | `string?` | `` |  |\n| MegaMenuItem | ChildContent | `RenderFragment?` | `` |  |\n| MegaMenuItem | Disabled | `bool` | `` |  |\n| MegaMenuItem | Class | `string?` | `` |  |\n| MegaMenuItem | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| MegaMenuLink | Href | `string` | `\"#\"` |  |\n| MegaMenuLink | Title | `string` | `string.Empty` |  |\n| MegaMenuLink | Description | `string?` | `` |  |\n| MegaMenuLink | Icon | `SvgIcon?` | `` |  |\n| MegaMenuLink | Disabled | `bool` | `` |  |\n| MegaMenuLink | Class | `string?` | `` |  |\n| MegaMenuLink | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| MegaMenuPanel | ChildContent | `RenderFragment?` | `` |  |\n| MegaMenuPanel | FullWidth | `bool` | `true` |  |\n| MegaMenuPanel | Columns | `int` | `4` |  |\n| MegaMenuPanel | Class | `string?` | `` |  |\n| MegaMenuPanel | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (MegaMenu) — RenderFragment slot\n- `ChildContent` (MegaMenuGroup) — RenderFragment slot\n- `ChildContent` (MegaMenuItem) — RenderFragment slot\n- `ChildContent` (MegaMenuPanel) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- `MegaMenuGroup`, `MegaMenuItem`, `MegaMenuLink`, `MegaMenuPanel`\n\n## Cascading values it expects\n- `Context` (`MegaMenu.MegaMenuContext`)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<MegaMenu />\n```\n\n## CSS variables\n`--color-accent`, `--color-accent-foreground`, `--color-border`, `--color-foreground`, `--color-muted`, `--color-muted-foreground`, `--color-popover`, `--radius`\n\n## Files\n- `UI/MegaMenu/MegaMenu.razor`\n- `UI/MegaMenu/MegaMenuGroup.razor`\n- `UI/MegaMenu/MegaMenuItem.razor`\n- `UI/MegaMenu/MegaMenuLink.razor`\n- `UI/MegaMenu/MegaMenuPanel.razor`\n"
}