Navigation

MegaMenu

Wide primary navigation menu with trigger/content panels, shared viewport, active indicator, and nested submenu support.

import { MegaMenu } from '@lostgradient/cinder/mega-menu';
navigationmega-menumenu
01

Overview

Primary navigation with wide multi-column content panels, optional hover activation, shared viewport, indicator, and nested submenu columns.

Usage

svelte 
<script lang="ts">
  import { MegaMenu } from '@lostgradient/cinder/mega-menu';

  const items = [
    {
      id: 'products',
      label: 'Products',
      sections: [
        { id: 'all', title: 'Products', links: [{ id: 'ui', label: 'UI kit', href: '/ui' }] },
      ],
    },
  ];
</script>

<MegaMenu {items} openOnHover viewportVisible indicatorVisible />
Live preview
02

When to use

Use when
  • Building site-level navigation where top-level categories reveal rich multi-column content.
  • You need optional hover-open behavior with keyboard-first trigger traversal.
Avoid when
03

Examples

Mega menu

Top-level trigger/content navigation with viewport, indicator, and nested submenu.

04

Props

Props for mega-menu
Name Type Default Required Bindable Description
id unknown req
items MegaMenuItem[] req Top-level trigger/content entries.
openOnHover boolean false Hover opens top-level content instead of click-only mode.
viewportVisible boolean true Render the shared content viewport wrapper.
indicatorVisible boolean true Render an active trigger indicator bar.
label text 'Main navigation' Accessible name for the navigation landmark.
dir 'ltr' | 'rtl' | 'auto' Text direction used for layout and keyboard navigation.
05

Accessibility

ArrowLeft/ ArrowRight/ Home/ End/ ArrowDown/ Escape
Traverses triggers and opens/closes panels.
Trigger focus remains in the tab order; Escape closes and returns focus to the active trigger.