> ## Documentation Index
> Fetch the complete documentation index at: https://help.experro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Menu component

The base theme provides a Menu component that allows the creation of a dynamic menu based on the provided `menu-id` obtained from the Admin Panel.

In this base theme, you can take a look at `header.tsx` file to view a working example of the same.

```js theme={null}
<nav className="header-navigation">
  <ExpMenu
    menuLinkObj={pageData.globalSettings?.header_com}
    ulClasses="flex align-center primary-navigation"
    liClasses="nav-item"
    linkNameClasses="nav-link flex align-center"
    keyValueForMenu="primary_navigation_menu_id_et"
    iconForNavChild={ 
      <i className="icon menu-arrow-icon">
        <IconArrowDown />
      </i>
    }
    index={0}
  />
</nav>
```

Navigation menus are commonly created using an unordered list (`<ul>`) and list items (`<li>`). Each list item represents a menu item or a link in the navigation. This structure provides a semantic and accessible way to represent a navigation menu.

| Props             | Description                                                                                                                                                                                                                                                                                                                                                                                   |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `menuLinkObj`     | An object contains the `id` of the navigation created in  Admin Panel. <br /> e.g. In the `Header` component, you can see that we are retrieving data from the `pageData` object, and within that, we access the `globalSettings` property which contains information about the `header`. This is where the navigation menu ID is specified.<br />                                            |
| `ulClasses`       | To style the main `<ul>` element of the navigation menu, apply a CSS class using the `className` attribute.                                                                                                                                                                                                                                                                                   |
| `liClasses`       | It works same way as `ulClasses` but for the list-item (`<li>`).                                                                                                                                                                                                                                                                                                                              |
| `linkNameClasses` | Accepts the name of class(es) to apply on the `<Link />` tag. You can view how `<Link>` works in `base-theme` at [Link Parser](../other/theme-utilities#linkparser).                                                                                                                                                                                                                          |
| `childMenuItem`   | The `ExpMenu` component works recursively. Whenever a child menu is created, the `ExpMenu` component is called again, which in turn returns a child `<ul>` element. This recursive behavior allows for the creation of nested menus or submenus within the navigation menu structure.                                                                                                         |
| `keyValueForMenu` | In the `header` menu, the data is being fetched from `pageData.globalSettings.header_com`. The `header_com` object contains all the information about the header component, including the menu ID. To access the menu ID, you need to provide the corresponding key. Take a look at [Header Menu Object](#headermenuobjectexample), In our case it will be `primary_navigation_id_et`. <br /> |
| `iconForNavChild` | You can provide an icon which you want to show in the menu item.                                                                                                                                                                                                                                                                                                                              |
| `index`           | In the context of recursion, the `index` parameter refers to the level of recursion being performed. By providing an initial value of zero, it will be incremented by one with each recursive call. This can be useful for tracking the depth or level of the recursion and performing specific actions or applying different styles based on the current recursion level.                    |

```json theme={null}
globalSettings: {
  header_com :[
    {
      "node_type": "child",
      "id": "ZW3YF6DRwL7E",
      "primary_navigation_id_et": "5fd774b8-15ad-4ac2-960f-7406c6e0df31",
      "created_at": "2023-06-20T08:45:12.325Z",
      "modified_at": "2023-06-20T08:45:12.325Z",
      "_version_": "1769210661176344576"
    }
  ]
}
```

Refer `header.tsx` and `menu.tsx` in the base theme for a detailed understanding of how the `index` parameter is used in the code.