NavMenu

MenuItem Type

Each item in the items array should follow this structure:

SubmenuItem Type

Each subitem in the subitems array should follow this structure:

Menu Types

• item - Standard navigation link with optional icon
• submenu - Dropdown menu containing a list of navigation items with optional descriptions
• megamenu - Large dropdown with custom content using Svelte snippets for complex layouts

Features

• Automatic active state detection based on current route
• Intelligent popover positioning (auto-adjusts to avoid viewport edges)
• Support for icons and descriptions in submenu items
• Customizable megamenus with full HTML/Svelte snippet support
• Three color variants: primary, secondary, and muted
• Click-outside detection to automatically close dropdowns
• Responsive sizing with sm, md, and lg options
• Smooth transitions and animations

Megamenu Example

Megamenus use Svelte snippets for completely custom content. Define your snippet and pass it to the menu item:

{#snippet megamenuContent()}
  <div class="grid grid-cols-3 gap-6 p-4">
    <div>
      <div class="navmenu-header">Documentation</div>
      <div class="flex flex-col gap-1">
        <a href="/docs" class="navmenu-submenu-item">
          <div class="navmenu-submenu-content">
            <div class="navmenu-submenu-label">Getting Started</div>
            <div class="navmenu-submenu-description">Quick start</div>
          </div>
        </a>
      </div>
    </div>
    <!-- More columns -->
  </div>
{/snippet}

const items = [
  {
    label: 'Resources',
    type: 'megamenu',
    megamenu: megamenuContent  // Pass the snippet reference
  }
];

Available CSS Classes for Megamenus

• .navmenu-header - Section header styling
• .navmenu-submenu-item - Individual menu item
• .navmenu-submenu-content - Content wrapper
• .navmenu-submenu-label - Item label
• .navmenu-submenu-description - Item description
• .navmenu-divider - Horizontal divider

Best Practices

• Keep the top-level menu items concise (3-7 items is ideal)
• Use megamenus for content-rich sections that benefit from visual organization
• Use simple submenus for straightforward navigation hierarchies
• Include descriptions in submenus to help users understand their options
• Ensure megamenu content is well-organized with clear headers and groupings
• Consider mobile responsiveness when designing megamenu layouts
• Define snippets outside the items array for better readability

Use Cases

• Primary navigation in application headers
• Landing page navigation with marketing content
• E-commerce category navigation
• Documentation site navigation
• Multi-level navigation hierarchies