> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/menus/mega-menu-1.md).

# Mega Menu #1

### Component Structure

* **MM1 COMPONENT** (Block): The main container of the Mega Menu, utilizing the `mm1_component` class for general styling, including padding and height adjustments to fit the menu within the viewport.
* **MM1 CONTAINER** (Container): Directly contains the logo and navigation elements, styled with `mm1__container` to layout these elements horizontally with space between them.
  * **MM1 LOGO WRAPPER** (Div): Encapsulates the logo image, using `mm1__logo-wrapper` for any needed adjustments.
    * **MM1 LOGO** (Image): The logo of the menu, with `mm1__logo` applied to control its maximum width and ensure proper scaling.
  * **MM1 NAV WRAPPER** (Div): Hosts the navigation structure, applying `mm1__nav-wrapper` for styling.
    * **MM1 NAV** (Nav-Nested): The primary navigation block, styled with `mm1__nav` to adjust typography and item spacing, specifically tailored for both default and mobile landscape orientations.

#### **Navigation Items**

* Navigation items are organized within a list, each item styled with `mm1__nav-link` for consistent typography and interaction states (hover, active).
* Dropdown menus are part of navigation items, indicated with `is--dropdown` alongside `mm1__nav-link`, triggering specific animations on interaction.

**Mega Menu Dropdown**

* The dropdown content, wrapped in `mm1__mega-wrapper`, is styled to appear seamlessly with the navigation bar.
* Within, `mm1__mega-container` organizes the content into columns, applying a grid layout for desktop views and adjusting for mobile.
* Content within each column, such as headlines, text, and buttons, is styled respectively with `mm1__mega-headline`, `mm1__mega-card-text`, and `mm1__button` for coherent visual hierarchy.

### Animation Structure

**Timelines**

* **MM1 - HOVER IN**: Animates the dropdown appearance and menu items for a dynamic entrance effect when hovered.
* **MM1 - CARD HOVER**: Focuses on individual card items within the dropdown, enhancing their interactivity with scale and opacity changes.
* **MM1 - COL#1 HOVER** and **MM1 - COL#2 HOVER**: These animations target the opacity of the mega menu columns, providing visual cues to the user's hover actions across different sections.
* **MM1 - NAV LINK**: Adds subtle movement to the navigation links within the mega menu for an engaging user experience.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/menus/mega-menu-1.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.