> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://ajuda.greatsoftwares.com.br/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to create a HAMBURGER menu in GreatPages

### HOW TO CREATE THE MENU ELEMENT

1. Access the page editor;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-10-as-_1nsu4a.png =650x385)

2. Click the **"+" icon** on the left side of the screen and then select **"Menu"**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-09-14-as-_pzp7up.png =650xauto)

3. Once you do this, the Menu element will be added to the page editor; to edit it, you need to click "**Edit**";

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-09-14-as-_x12ctm.png =650x187)

4. After doing so, among the editing options, you can configure the element's style, starting with:

###### ALIGNMENT

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-09-14-as-_lai2p6.png =650x370)

* **Alignment**: Select the alignment type for the menu (left-aligned or centered).
* **Fix to top**: Option to pin the menu to the top of the page. As you scroll down, the menu will remain fixed at the top.

###### LOGO

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-09-14-as-_l5mkfv.png =650x389)

* **Logo**: (Optional) Select the logo image to be displayed next to the menu.
* **Size**: Size setting for the logo displayed in the page menu.

###### COLORS AND FONT STYLES

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-09-14-as-_179oxue.png =650x396)

* **Panel color**: Background color of the menu element.
* **Hover color**: Color that appears on the menu option when hovering the mouse cursor over it.
* **Menu font**: Font used for menu text.
* **Submenu font**: Font used for submenu text.

###### BORDERS

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-09-14-as-_1nggct5.png =650x401)

* **Borders**: Select whether or not the menu element will have borders.

5. After configuring the visual aspect of the menu element, clicking **Configure** allows you to start setting up button actions, beginning with the items. To add new items to the menu, click **"Add item"**;

|| If you wish to edit existing items, click the pencil icon, or click the trash can icon to delete them.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-09-14-as-_ebywle.png =650x394)

6. Doing so opens a screen where you can configure the item by filling in the fields below;

* **Label**: Name of the menu item.
* **Destination**: Destination page for the menu item. If you want to link the click to a specific block on the same page, choose "**Page block**".
* **Open in new tab**: Option to have the menu destination page open in a new tab, rather than in the current browsing window.
* **Sub-items**: Configuration for menu sub-items (submenus). 

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-09-14-as-_sl4dda.png =650x354)

7. After configuring the menu items—while still on the settings screen—you have the option to enable or disable menu visibility; this allows you to hide the element on either the Desktop (computer) or Mobile (smartphone) version of the page.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-09-14-as-_yooh6q.png =650x396)

8. Finally, by accessing the "**Code**" option, you can copy the element's code or edit the HTML (only modify the element's HTML if you have coding knowledge).

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-09-14-as-_wic8vi.png =650x391)

### HOW TO CREATE THE HAMBURGER MENU

The hamburger menu element is displayed on the mobile version of the page.

After creating it on the desktop version of the page, follow the steps below:

9. Click on "**Mobile**" at the top center of the screen, then locate the hamburger menu icon and click on "**Edit**";

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-09-14-as-_xys51b.png =650x252)

10. Next, the settings menu will open on the side, where you can edit the following options:

* **Icon**: The icon displayed to open the menu.
* **Icon color**: The color of the icon displayed to open the menu.
* **Panel color:** The background color of the expanded menu options.
* **Hover color:** The color of the menu items when hovering the mouse cursor over them. 

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-09-14-as-_10q8gwl.png =650x440)

11. Below the color settings, you can configure the menu fonts and submenu fonts;

* **Menu fonts**: Fonts for menu items.
* **Submenu fonts**: Fonts for menu sub-items.

|| Note that the font options are already predefined in the page's Design System. [Click here to learn more about the Design System.](https://ajuda.greatsoftwares.com.br/en-us/article/how-to-use-the-style-guide-design-system-on-greatpages-1hsdtp3/)

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-09-14-as-_1mih6on.png =650x436)

12. Finally, there are settings for the spacing between menu items and border options;

* **Spacing between items:** Space between menu items.
* **Panel border:** Borders for the menu item display panel.
* **Icon border:** Borders for the menu icon. 

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-09-14-as-_1ckzzzf.png =650x440)

13. After that, all settings are the same as those in the desktop version. __And it is important to remember that settings made in one version will be reflected in the other.__

We hope this helps! If you have any questions, please contact our support team. We are always here to help. <3