> ## 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).

# Como criar um MENU HAMBURGUER no GreatPages

### COMO CRIAR O ELEMENTO DE MENU

1. Acesse o editor de páginas;

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

2. Clique no **ícone de "+"** no lado esquerdo da tela e em seguida selecione **"Menu"**;

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

3. Quando fizer isso o elemento de Menu será adicionado no editor de páginas e para editá-lo é necessário clicar em Editar;

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

4. Quando fizer isso, entre as opções de edições você poderá configurar o estilo do elemento, começando por:

###### ALINHAMENTO

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

* **Alinhamento**: Selecione o tipo de alinhamento que deseja colocar no menu (alinhado a esquerda, alinhado a esquerda ou centralizado).
* **Fixar no topo**: Opção de fixar o menu no topo da página. Ao rolar a página para baixo, o menu permanecerá suspenso.

###### LOGO

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

* **Logo**: (Opcional) Selecione a imagem do logo que será apresentado ao lado do menu.
* **Tamanho**: Configuração do tamanho do logo apresentado no menu da página.

###### CORES E ESTILOS DE FONTES

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

* **Cor do painel**: Cor de fundo do elemento de menu.
* **Cor de hover**: Cor que aparecerá na opção do menu ao passar o cursor do mouse encima.
* **Fonte do menu**: Fonte utilizada nos textos do menu.
* **Fonte dos submenus**: Fonte utilizada nos textos dos submenus.

###### BORDAS 

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

* **Bordas**: Selecione se o elemento de menu terá ou não bordas.

5. Depois de configurar a parte visual do elemento de menu, clicando em **Configurar** você poderá dar início a configuração de ação dos botões, começando pelos itens. Para adicionar novos itens no menu clique em **"Adicionar item"**;

|| Caso queira editar os itens existentes, clique no ícone de lápis, ou clique no ícone de lixeira para excluí-los.

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

6. Ao fazer isso abrirá uma tela onde você poderá configurar o item preenchendo os campos abaixo;

* **Rótulo**: Nome do item do menu.
* **Destino**: Página de destino do item do menu. Caso queira vincular o clique a um bloco específico da mesma página opte por "**Bloco da página**".
* **Abrir em nova aba**: Opção de a página de destino do menu ser aberta em uma nova página, ao invés de abrir na página atual de navegação.
* **Subitens**: Configuração de subitens do menu (submenus).

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

7. Após configurar os itens do menu, ainda na tela de configurações, temos a opção de ativar ou desativar a visibilidade do menu, que consiste em ocultar este elemento em uma das versões da página, Desktop (computadores) ou Mobile (celulares);

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

8. Por último, acessando a opção "**Código**" você poderá copiar o código do elemento ou editar o HMTL (apenas modifique o HTML do elemento se tiver conhecimento em código).

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

### COMO CRIAR O MENU HAMBURGUER

O elemento de menu hamburguer é mostrado na versão Mobile da página.

Depois de criá-lo na versão desktop da página siga os próximos passos abaixo:

9. Clique em "**Mobile**" no centro superior da tela e em seguida localize o ícone de menu hamburguer e clique em "**Editar**";

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

10. Em seguida irá abrir o menu de configurações ao lado, onde poderá editar as opções abaixo:

* **Ícone**: Ícone exibido para abertura do menu.
* **Cor do ícone**: Cor do ícone exibido para abertura do menu.
* **Cor do painel:** Cor de fundo das opções do menu expandidas.
* **Cor do hover:** Cor dos itens do menu ao passar o cursor do mouse encima.

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

11. Abaixo da configuração das cores, é possível configurar as fontes do menu e as fontes dos submenus;

* **Fontes dos menus**: Fontes dos itens do menu.
* **Fontes dos submenus**: Fontes dos subitens do menu.

|| Lembrando que as opções de fontes já estão pré-determinadas no Design System da página. [Para saber mais sobre o Design System clique aqui.](https://ajuda.greatsoftwares.com.br/pt-br/article/como-utilizar-o-guia-de-estilos-design-system-no-greatpages-meeo4v/)

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

12. E por último, temos a configuração de espaçamento entre os itens do menu e as opções de bordas;

* **Espaçamento entre itens:** Espaço entre os itens do menu.
* **Borda do painel:** Bordas do painel de exibição dos itens do menu.
* **Borda do ícone:** Bordas do ícone do menu.

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

13. Depois disso, todas as configurações são iguais as configurações da versão Desktop. __E é importante lembrar que as configurações realizadas em uma das versões será refletida na outra.__

Esperamos ter ajudado! Qualquer dúvida, chame nosso suporte. Estamos sempre à disposição. <3