Mega Menu

Display multiple groups of links in a grid-like layout

npm run add MegaMenu

Use the MegaMenu component to create a large, expandable navigation menu that can display multiple categorized links in a structured, grid-like layout.

Preview

Unlock code

---
// Your import path to your icons might differ
// Icons are provided with the component
import rocketIcon from '@icons/rocket.svg?raw'
import terminalIcon from '@icons/terminal.svg?raw'
import fileIcon from '@icons/file.svg?raw'

const megaMenuItems = [
    { name: 'Home', href: '/' },
    {
        name: 'Resources',
        children: [
            {
                title: 'Astro',
                items: [
                    {
                        name: 'Getting Started',
                        href: '#',
                        icon: rocketIcon,
                        subText: 'Launch your first Astro project'
                    },
                    {
                        name: 'Installation',
                        href: '#',
                        icon: terminalIcon,
                        subText: 'Step-by-step instructions'
                    },
                    {
                        name: 'Configuration',
                        href: '#',
                        icon: fileIcon,
                        subText: 'Learn how to configure Astro'
                    }
                ]
            },
            { ... }
        ]
    },
    {
        name: 'Learning Paths',
        children: [ ... ]
    },
    {
        name: 'Extras',
        children: [ ... ]
    }
]
---

<MegaMenu items={menuItems} />

The MegaMenu component expects an items prop that describes the menu items as an array of objects. Items can be a regular or a mega menu link. To create an ordinary link, provide the following properties for an item object:

name: Sets the name of the navigation item.
href: Sets a link for the navigation item.

If you want a mega menu to appear, provide a children property in place of the href property. It expects an array of objects, where each object will be rendered as a separate column. Columns can have the following data:

title: Sets an optional title for the column.
items.name: Sets the name of the mega menu item.
items.subText: Sets additional secondary text under the item’s name. This field is also optional.
items.href: Sets the link of the mega menu item.
items.icon: Sets an optional icon in front of the item’s name. The icon can be an SVG string or an existing icon type described in this documentation.

Logo and Additional Content

You can also provide a logo prop to the component to define a logo, or pass additional elements as the children of the component to provide more actions to your users.

Unlock code

---
import { Icon } from 'webcoreui/astro'
import logo from '@img/logo.svg'
---

<MegaMenu
    items={menuItems}
    logo={{ html: logo }}
>
    {/* Additional content will appear on the right size of the menu */}
    <Icon type="github" size={16} />
</MegaMenu>

API

Unlock code

export type NavigationChildren = {
    title?: string
    items: {
        name: string
        href: string
        icon?: string
        subText?: string
    }[]
}

export type MegaMenuProps = {
    items: {
        name: string
        href?: string
        children?: NavigationChildren[]
    }[]
    logo?: {
        url?: string
        alt?: string
        width?: number
        height?: number
        html?: string
    }
    className?: string
}

Prop	Purpose
`items.name`	Sets the name of the navigation link.
`items.url`	Sets a url for the navigation link.
`items.children`	Sets the submenu items of the navigation element, turning it into a mega menu.
`logo`	Specifies a logo for the menu.
`logo.url`	Sets the path for the logo.
`logo.alt`	Sets an alternate text for the logo.
`logo.width`	Sets the width of the logo.
`logo.height`	Sets the height of the logo.
`logo.html`	Use for directly injecting SVG logos into the markup.
`className`	Pass additional CSS classes for the menu.

NavigationChildren Prop	Purpose
`title`	Sets an optional title for the column.
`items.name`	Sets the name of mega menu item.
`items.href`	Sets the link for the mega menu item.
`items.icon`	Sets an optional SVG icon for the mega menu item.
`items.subText`	Sets an optional secondary text under the item's name.