# Mega Menu Mega menus dropdown menus that appear when users hover or click on a navigation option. They are typically seen on websites with a wide range of content and categories. Mega menus are particularly useful in UX design as they can provide an overview of all available options within a site\'s complex information architecture. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-mega-menu--introduction ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Mega Menu. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html

Components

Mega Menu

Mega menus dropdown menus that appear when users hover or click on a navigation option. They are typically seen on websites with a wide range of content and categories. Mega menus are particularly useful in UX design as they can provide an overview of all available options within a site's complex information architecture.

Mega Menu Showcase

Visual demonstration of Mega Menu variations.

Variant 1

Variant 2

Variant 3

Variant 4

Variant 5

Variant 6

CSS Class Reference

Quickly copy layout and utility classes for Mega Menus.

Structural Classes

Main Container ux4g-mega-menu

Inner Container ux4g-mega-menu-container

Sidebar Area ux4g-mega-menu-sidebar

Content Area ux4g-mega-menu-content

Column ux4g-mega-menu-column

Item List ux4g-mega-menu-item-list

``` React: ```jsx import React from 'react'; const MegaMenuExample1Demo = () => ( <>

Components

Mega Menu

Mega Menu Showcase

Visual demonstration of Mega Menu variations.

Variant 1

Title

Title2

Title3

Title4

Title5

Title6

Title7

Title8

Variant 2

{/* Column 1 */}

Title

{/* Column 2 */}

Title

{/* Column 3 */}

Title

{/* Column 4 */}

Title

Variant 3

{/* Row 1 */}

Title

{/* Row 2 */}

Title

Variant 4

{/* Left Grid: 3 columns, 2 rows */}

{/* Column 1, Row 1 */}

Title

{/* Column 2, Row 1 */}

Title

{/* Column 3, Row 1 */}

Title

{/* Column 1, Row 2 */}

Title

{/* Column 2, Row 2 */}

Title

{/* Column 3, Row 2 */}

Title

{/* Right Promo Sidebar */}

Variant 5

{/* Category 1 Content */}

Category 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

{/* Col 1 */}

Mega Menu

Mega Menu Showcase

Variant 1

Title

Title

Title

Title

Title2

Title2

Title2

Title2

Title3

Title3

Title3

Title3

Title4

Title4

Title4

Title4

Title5

Title5

Title5

Title5

Title6

Title6

Title6

Title6

Title7

Title7

Title7

Title7

Title8

Title8

Title8

Title8

Variant 2

Title

Title

Title

Title

Variant 3

Title

Title

Title

Title

Title

Title

Title

Title

Variant 4

Title

Title

Title

Title

Title

Title

Variant 5

Category 1

Category 2

Category 3

Category 4

Category 5

Category 6

Category 7

Category 8

Variant 6

CSS Class Reference

Structural Classes

Mega Menu

Mega Menu Showcase

Variant 1

Title

Title

Title

Title

Title2

Title2

Title2

Title2

Title3