{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "header-mega-menu", "title": "Header — Mega Menu", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/header-mega-menu/header-mega-menu.component.ts", "content": "// Navbar whose product and resources items open a full-width mega panel of grouped,\n// described links plus a highlighted feature card — keyboard navigable, closing on\n// Escape. Port of the Vue/React block 1:1: panel columns derive from the `menus`\n// array, so a new group needs no extra markup.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport {\n ArrowRight,\n BarChart3,\n BookOpen,\n Boxes,\n Layers,\n LifeBuoy,\n Lock,\n LucideAngularModule,\n Menu,\n Workflow,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiNavigationMenuComponent,\n UiNavigationMenuContentComponent,\n UiNavigationMenuItemComponent,\n UiNavigationMenuListComponent,\n UiNavigationMenuTriggerComponent,\n navigationMenuTriggerStyle,\n} from '@/ui/navigation-menu/navigation-menu.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiSheetCloseComponent,\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n} from '@/ui/sheet/sheet.component'\n\nexport interface MegaMenuLink {\n icon: LucideIconData\n title: string\n body: string\n}\n\nexport interface MegaMenuGroup {\n heading: string\n items: MegaMenuLink[]\n}\n\nexport interface MegaMenuHighlight {\n title: string\n body: string\n cta: string\n}\n\nexport interface MegaMenu {\n label: string\n groups: MegaMenuGroup[]\n highlight: MegaMenuHighlight\n}\n\nexport interface MegaMenuPlainLink {\n label: string\n href: string\n}\n\nconst menus: MegaMenu[] = [\n {\n label: 'Product',\n groups: [\n {\n heading: 'Core',\n items: [\n { icon: Boxes, title: 'Metric layer', body: 'Versioned definitions your whole org shares.' },\n { icon: BarChart3, title: 'Dashboards', body: 'Composed from certified metrics, not raw SQL.' },\n { icon: Workflow, title: 'Pipelines', body: 'Scheduled materialisation with cost ceilings.' },\n ],\n },\n {\n heading: 'Governance',\n items: [\n { icon: Lock, title: 'Row-level access', body: 'Scope evaluated per query, per identity.' },\n { icon: BookOpen, title: 'Change history', body: 'Every definition edit reviewed and revertible.' },\n { icon: LifeBuoy, title: 'Audit exports', body: 'Generated from the same history, not by hand.' },\n ],\n },\n ],\n highlight: {\n title: 'Ship your first dashboard today',\n body: 'Connect a warehouse, publish one certified metric, and invite the team. No migration required.',\n cta: 'Start the walkthrough',\n },\n },\n {\n label: 'Resources',\n groups: [\n {\n heading: 'Learn',\n items: [\n { icon: BookOpen, title: 'Documentation', body: 'Setup, modelling, and the access model.' },\n { icon: Layers, title: 'Guides', body: 'Reconciliation and first-close checklists.' },\n { icon: BarChart3, title: 'Benchmarks', body: 'Close speed across 240 finance teams.' },\n ],\n },\n {\n heading: 'Support',\n items: [\n { icon: LifeBuoy, title: 'Help centre', body: 'Answers to the questions support gets most.' },\n { icon: Workflow, title: 'Status', body: 'Live uptime and incident history.' },\n { icon: Lock, title: 'Trust centre', body: 'SOC 2, subprocessors, and data residency.' },\n ],\n },\n ],\n highlight: {\n title: 'Read the rollout plan',\n body: 'The five-week implementation we run for every customer, written down so you can run it yourself.',\n cta: 'Open the plan',\n },\n },\n]\n\nconst plainLinks: MegaMenuPlainLink[] = [\n { label: 'Pricing', href: '#pricing' },\n { label: 'Customers', href: '#customers' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-header-mega-menu, [ui-header-mega-menu]',\n standalone: true,\n // The block renders its own
: keep this wrapper out of the layout.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiButtonComponent,\n UiNavigationMenuComponent,\n UiNavigationMenuContentComponent,\n UiNavigationMenuItemComponent,\n UiNavigationMenuListComponent,\n UiNavigationMenuTriggerComponent,\n UiSeparatorComponent,\n UiSheetCloseComponent,\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n ],\n template: `\n
\n
\n \n \n Northwind\n \n\n \n\n
\n \n
\n \n
\n\n
\n \n \n \n
\n
\n

Menu

\n
\n \n
\n
\n
\n
\n `,\n})\nexport class UiHeaderMegaMenuComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Layers = Layers\n protected readonly Menu = Menu\n\n protected readonly megaMenus = menus\n protected readonly plain = plainLinks\n protected readonly plainLinkClass = navigationMenuTriggerStyle()\n\n @Input('class') className?: string\n\n readonly mobileOpen = signal(false)\n\n get rootClass(): string {\n return cn('border-border bg-background/90 border-b backdrop-blur', this.className)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/header-mega-menu/header-mega-menu.component.ts" }, { "path": "packages/registry-angular/blocks/header-mega-menu/index.ts", "content": "export {\n UiHeaderMegaMenuComponent,\n type MegaMenu,\n type MegaMenuGroup,\n type MegaMenuHighlight,\n type MegaMenuLink,\n type MegaMenuPlainLink,\n} from './header-mega-menu.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/header-mega-menu/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/navigation-menu.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/sheet.json" ], "description": "Navbar whose product and resources items open a full-width mega panel of grouped, described links plus a highlighted feature card, keyboard navigable and closing on Escape.", "categories": [ "marketing" ], "deprecated": true, "replacedBy": "header" }