Starlight Mega Menu Plugin

The starlight-mega-menu plugin replaces or enhances the standard top-level header navigation in Astro Starlight with a responsive, multi-column mega-menu dropdown. It allows documentation sites across the ecosystem to organize complex multi-tier navigation hierarchies with icon support, category columns, and footers.

Features

Multi-Column Grid Layouts

Configure flexible column spans with organized categories and link groups.

Rich Iconography

Serializable SVG descriptors preserve branded artwork and theme-aware monochrome icons.

Internationalization Ready

Full multi-locale translation support for labels, descriptions, and footer links.

Keyboard Accessible

Full WAI-ARIA compliance with Esc key handling, tab trapping, and screen reader labels.

Installation

npm install @f5-sales-demo/starlight-mega-menu

Quick Configuration

Add the plugin to your astro.config.mjs:

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import starlightMegaMenu from '@f5-sales-demo/starlight-mega-menu';

export default defineConfig({
  integrations: [
    starlight({
      title: 'Example Documentation',
      plugins: [
        starlightMegaMenu({
          items: [
            {
              label: 'Solutions',
              content: {
                layout: 'grid',
                columns: 2,
                categories: [
                  {
                    title: 'Security',
                    items: [
                      {
                        label: 'Web Application Firewall',
                        description: 'WAF rules and signature inspection',
                        href: 'https://docs.example.com/waf/',
                        icon: {
                          body: '<path d="M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Z"/>',
                          width: 24,
                          height: 24,
                          mode: 'currentColor',
                        },
                      },
                    ],
                  },
                ],
              },
            },
          ],
        }),
      ],
    }),
  ],
});