Components

Mega Menu

Mega menu are to display a list of options on a temporary surface

Selected Theme

Select brand or tribe name to preview style

Default

Usage

Mega menu are to display a list of options on a temporary surface.

To use this component, import { Megamenu } component from legion-ui

import { Megamenu } from 'legion-ui';

Variant

Legion have only one type of mega menu with action click and hover

import { Button, DynamicIcon, Megamenu } from 'legion-ui';
import React from 'react';

const MegamenuExample = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const onClick = () => setIsOpen((prev) => !prev);
  const onClose = () => setIsOpen(false);

  return (

Example Data

const datas = [
  {
    title: 'Arts & Craft',
    icon: 'PenTool',
    items: [
      {
        title: 'Antiques & Collectibles',
        item: [
          { label: 'Antique Furniture', url: '' },

Props

property	propType	required	default	desc
action	`click` \| `hover`	-	-	Sets action of each items between click or hover
data	Array<Data>	`yes`	-	Sets data of megamenu
isOpen	boolean	`yes`	-	Status that makes the megamenu appear
onClose	`() ⇒ void`	`yes`	-	Function to close the megamenu
trigger	`React.ReactNode`	`yes`	-	Used to wrap the reference (or trigger) element
space	number	-	-	Space between trigger and the megamenu box
width	number	`yes`	-	Sets width of megamenu

Do you have feedback?

Please let us know to make it better

Send Feedback