> For the complete documentation index, see [llms.txt](https://landofcoder.gitbook.io/magento-2-megamenu/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://landofcoder.gitbook.io/magento-2-megamenu/config-and-usage/configure-menu-item.md). # Configure menu item Configure Menu I will show you how to config magento 2 menu with our magento 2 megamenu extension. Please follow our tutorials step by step. A menu item have 8 tabs: * **General Information** * **Dropdown** * **Header** * **Left Block** * **Main Content** * **Right Block** * **Bottom Block** * **Design** Before configuring all item settings, we need to check a structure of each menu item ![Sub menu design layout](https://3877357577-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ml4NK7Q1RRARTJZU4uN%2F-Ml4PgUKhVGU3sPjjUXy%2F-Ml4RWS4cus5K4Ko4drc%2Fmenu-item-structure1.png?alt=media\&token=b2beb2ca-19eb-43fa-91d9-e4f7676a6558) #### **General Information** * **Name:** Title of the menu item, such as Home, Women, Men, etc… * **Link Type:** There are 2 link types: * Custom Link: Enter your custom link, this field supports Magento 2 short code: **{{store url=”contact”}} => ** * Category Link: render link by specific category * **Link Target:** There are 4 options: * Load in a new window * Load in the same frame as it was clicked * Load in the parent frameset * Load in the full body of the window * **Show Icon:** Upload a icon for this item, then update icon position * **Is Group:** Set Yes to allow Sub-menu items show in the same level of parent without hover on parent to show them. ![Dropdown items enable Group option](https://3877357577-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ml4NK7Q1RRARTJZU4uN%2F-Ml4PgUKhVGU3sPjjUXy%2F-Ml4Rgr235bIAzumclyU%2Fgroup.png?alt=media\&token=2edb800b-9ee1-429e-b4b6-f238ad3fa6e6) * **Disable Dimesions:** Enter the width(pixel) want to disable, menu will be hidden when screen width less than the field value * **Bootstrap 3 Media Query Breakpoints:** * Large Devices, Wide Screens: 1200px * Medium Devices, Desktops: 992px * Small Devices, Tablets: 768px * Extra Small Devices, Phones: 480px * IPhone Retina: 320px * **Status:** You can enable or disable this item #### **Dropdown** * **Width:** Set width for menu item dropdown. Fx: **1000px**, **100%** * **Animation In:** Dropdown appearance effect. There are 9 groups and 44 effects * **Animation Time:** Set total time of effect. * **Alignment:** There four alignment types for the menu content to appear * **From left menu:** menu dropdown content will appear from the left of menu bar to the right ![](https://3877357577-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ml4NK7Q1RRARTJZU4uN%2F-Ml4PgUKhVGU3sPjjUXy%2F-Ml4Rvk3cJSdDQFdaifc%2Fmenu-menuleft1.png?alt=media\&token=d99dd875-0b43-49b1-9d96-75aede2f7724) * **From right menu:** menu dropdown content will appear from the right of menu bar to the left ![](https://3877357577-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ml4NK7Q1RRARTJZU4uN%2F-Ml4PgUKhVGU3sPjjUXy%2F-Ml4S2r2kyV9aqc3kAh4%2Fmenu-menuright1.png?alt=media\&token=eb202b6a-b614-47c9-b19d-0de991ecc009) * **From left item:** menu dropdown content will appear from the left of menu item ![](https://3877357577-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ml4NK7Q1RRARTJZU4uN%2F-Ml4PgUKhVGU3sPjjUXy%2F-Ml4SBdzsoBBObKnNsdO%2Fmenu-itemleft1.png?alt=media\&token=7d5c230d-b0f8-4ae7-82e3-948fab9ba650) * **From right item:** menu dropdown content will appear from the right of menu item ![](https://3877357577-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ml4NK7Q1RRARTJZU4uN%2F-Ml4PgUKhVGU3sPjjUXy%2F-Ml4SHfqlArs1HOrNRzH%2Fmenu-itemright1.png?alt=media\&token=75368827-55c2-4f31-a629-228518c851b0) * **From right item:** menu dropdown content will appear from the right of menu item ![](https://3877357577-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ml4NK7Q1RRARTJZU4uN%2F-Ml4PgUKhVGU3sPjjUXy%2F-Ml4SUloHH6Z6qp1tJ6Y%2Fmenu-itemright1.png?alt=media\&token=e816a0f5-8932-45eb-93bb-a1e6590e218e) * **Background Options:** background color, background image, background repeat, background position x, background position y ![](https://3877357577-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ml4NK7Q1RRARTJZU4uN%2F-Ml4PgUKhVGU3sPjjUXy%2F-Ml4SO92JuBthlHmEbZA%2Fmenu-backgroundoptions.png?alt=media\&token=19e9d8af-159e-4302-8a3a-de70be28802c) * **Inline CSS:** Add custom code css for this item. **Header:** Default width is 100%. **Left Block:** Supports Wysiwyg editor, you can insert HTML code, Video(youtube, ,…), Magento widget,etc **Main Content:** There are four content types * **Child Menu Item:** Display menu item in the menu editor section ![](https://3877357577-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ml4NK7Q1RRARTJZU4uN%2F-Ml4PgUKhVGU3sPjjUXy%2F-Ml4Sb_Rqzmrm7WF3qgv%2Fmenuitem-subitem-2.png?alt=media\&token=375e471c-986c-4c7f-a8b7-5059f48b78df) * **Content:** Supports Wysiwyg editor: insert HTML code, Video(youtube, vimeo,…), Magento widget ![](https://3877357577-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ml4NK7Q1RRARTJZU4uN%2F-Ml4PgUKhVGU3sPjjUXy%2F-Ml4SiVAGfaqW57fC247%2Fmenuitem-content1.png?alt=media\&token=a8db549e-ebc3-4d2f-aa7d-d84f51085e98) * **Dynamic Content Tab:** Each item as a tab, the first tab is default active ![](https://3877357577-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ml4NK7Q1RRARTJZU4uN%2F-Ml4PgUKhVGU3sPjjUXy%2F-Ml4SoTJxsSw7DOI3Wd8%2Fdynamic1.png?alt=media\&token=0327335c-f4d6-4550-9132-184dc66909a9) * **Sub-Categories:** Show all sub-categories by specific category **Right Block:** Change block width. Fx: 100%, 400px. Supports Wysiwyg editor **Bottom Block:** Default width is 100%. Supports Wysiwyg editor **Design:** Customize the style of menu item: color, background color,…