{"id":4008,"date":"2024-08-30T19:10:04","date_gmt":"2024-08-30T19:10:04","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=4008"},"modified":"2026-01-20T14:47:46","modified_gmt":"2026-01-20T14:47:46","slug":"o-que-e-o-menu-hamburguer-de-um-website","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-o-menu-hamburguer-de-um-website\/","title":{"rendered":"O que \u00e9 o Menu Hamb\u00farguer de um site?"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>\u00cdndice<\/h2><nav><ul><li><a href=\"#how-does-the-hamburger-menu-function\">Como funciona o menu hamb\u00farguer?<\/a><\/li><li><a href=\"#why-is-the-hamburger-menu-so-popular-in-web-and-mobile-design\">Por que o menu hamb\u00farguer \u00e9 t\u00e3o popular no design web e mobile?<\/a><ul><li><a href=\"#what-should-a-website-hamburger-menu-be-used-for\">Para que deve ser usado um menu hamb\u00farguer em um site?<\/a><\/li><\/ul><\/li><li><a href=\"#how-is-the-hamburger-menu-implemented-in-web-development\">Como o menu hamb\u00farguer \u00e9 implementado no desenvolvimento web?<\/a><\/li><li><a href=\"#what-are-the-alternatives-to-the-hamburger-menu\">Quais s\u00e3o as alternativas ao menu hamb\u00farguer?<\/a><\/li><li><a href=\"#does-the-hamburger-menu-affect-the-accessibility-of-a-website-or-app\">O menu de hamb\u00farguer afeta a acessibilidade de um site ou aplicativo?<\/a><\/li><li><a href=\"#what-are-the-hamburger-menu-design-pros-and-cons\">Quais s\u00e3o os pr\u00f3s e contras do design do menu de hamb\u00farguer?<\/a><\/li><li><a href=\"#conclusion\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-does-the-hamburger-menu-function\" style=\"font-size:32px\"><strong>Como funciona o menu hamb\u00farguer?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">O menu de hamb\u00farguer atua como uma gaveta vertical ou horizontal que cont\u00e9m a navega\u00e7\u00e3o. No momento da intera\u00e7\u00e3o, ele se abre para mostrar um conjunto de \u00e1reas de navega\u00e7\u00e3o, geralmente em algum lugar \u00e0 direita ou acima da janela.<\/p>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-is-the-hamburger-menu-so-popular-in-web-and-mobile-design\" style=\"font-size:32px\"><strong>Por que o menu hamb\u00farguer \u00e9 t\u00e3o popular no design web e mobile?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Alguns sites oferecem muitos hiperlinks, o que pode levar a uma p\u00e1gina polu\u00edda e confusa; o menu hamb\u00farguer \u00e9 popular no design web e mobile porque exibe as op\u00e7\u00f5es de navega\u00e7\u00e3o sem ocupar muito espa\u00e7o na tela. Isso \u00e9 especialmente importante em telas menores, onde cada pixel conta.<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nConsidere usar um padr\u00e3o de navega\u00e7\u00e3o \u201cPrioridade+\u201d, combinando um menu hamb\u00farguer com alguns links vis\u00edveis importantes para as se\u00e7\u00f5es mais importantes.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" id=\"what-should-a-website-hamburger-menu-be-used-for\" style=\"color:#422b82;font-size:22px\"><strong>Para que deve ser usado um menu hamb\u00farguer em um site?<\/strong><\/h3>\n\n\n\n<p style=\"font-size:18px\">Um menu hamb\u00farguer deve ser usado para as seguintes fun\u00e7\u00f5es:<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Navega\u00e7\u00e3o principal:<\/strong> Sites com muitas se\u00e7\u00f5es podem parecer confusos ou desorganizados; use o menu hamb\u00farguer para dar a eles uma apar\u00eancia organizada e manter as coisas f\u00e1ceis de encontrar.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Navega\u00e7\u00e3o secund\u00e1ria:<\/strong> Os links \u201cSobre n\u00f3s\u201d ou \u201cContato\u201d podem ser armazenados no menu hamb\u00farguer.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-is-the-hamburger-menu-implemented-in-web-development\" style=\"font-size:32px\"><strong>Como o menu hamb\u00farguer \u00e9 implementado no desenvolvimento web?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Normalmente, ele \u00e9 criado a partir de uma combina\u00e7\u00e3o de HTML, CSS e JavaScript, mas muitas estruturas de desenvolvimento web tamb\u00e9m fornecem componentes de menu hamb\u00farguer prontos para uso, por conveni\u00eancia.<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nVerifique o menu em diferentes dispositivos e vari\u00e1veis para garantir que a interpreta\u00e7\u00e3o do hamb\u00farguer e sua funcionalidade estejam corretas.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-the-alternatives-to-the-hamburger-menu\" style=\"font-size:32px\"><strong>Quais s\u00e3o as alternativas ao menu hamb\u00farguer?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Considere estas alternativas ao planejar a organiza\u00e7\u00e3o do seu site:<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Barra de Guias:<\/strong> Ideal para colocar algumas categorias principais diretamente, \u00e9 um arranjo horizontal de \u00edcones encontrado na parte inferior da tela do dispositivo.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Prioridade + Navega\u00e7\u00e3o: <\/strong>Este \u00e9 um m\u00e9todo misto, no qual alguns links principais s\u00e3o apresentados com destaque e outros s\u00e3o ocultos em um menu de hamb\u00farguer.<\/li>\n<\/ul>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional: \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nSe voc\u00ea n\u00e3o tem muitos itens para ilustrar as op\u00e7\u00f5es do menu, uma barra de guias pode ser usada. Outra op\u00e7\u00e3o \u00e9 exibir todos os hiperlinks na p\u00e1gina em vez de ocult\u00e1-los em um local separado.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"does-the-hamburger-menu-affect-the-accessibility-of-a-website-or-app\" style=\"font-size:32px\"><strong>O menu de hamb\u00farguer afeta a acessibilidade de um site ou aplicativo?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Sim, o menu de hamb\u00farguer facilita a cria\u00e7\u00e3o de designs agrad\u00e1veis e aproveita ao m\u00e1ximo o espa\u00e7o dispon\u00edvel, mas se implementado incorretamente, pode tornar o aplicativo ou site menos acess\u00edvel aos seus usu\u00e1rios.&nbsp;<\/p>\n\n\n\n<p style=\"font-size:18px\">Embora ajude a fornecer uma solu\u00e7\u00e3o eficiente em termos de espa\u00e7o, tamb\u00e9m pode ocultar v\u00e1rios links de navega\u00e7\u00e3o importantes, tornando o conte\u00fado inacess\u00edvel aos usu\u00e1rios, especialmente aqueles com defici\u00eancias.<\/p>\n\n\n\n<p style=\"font-size:18px\"><strong>Considera\u00e7\u00f5es importantes sobre acessibilidade:<\/strong><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Etiquetas claras: <\/strong>Certifique-se de que o \u00edcone de hamb\u00farguer seja descrito com o r\u00f3tulo \u201cMenu\u201d ou um r\u00f3tulo ARIA destinado a leitores de tela, como a palavra \u201cMenu\u201d.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Navega\u00e7\u00e3o por teclado: <\/strong>Os usu\u00e1rios devem ser capazes de interagir com o menu sem usar um mouse ou touchpad (por exemplo, usu\u00e1rios que t\u00eam apenas o teclado dispon\u00edvel).<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Estados de foco:<\/strong> Facilite para os usu\u00e1rios determinar qual item do menu est\u00e1 em foco, destacando-o ou identificando-o de outra forma.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-the-hamburger-menu-design-pros-and-cons\" style=\"font-size:32px\"><strong>Quais s\u00e3o os pr\u00f3s e contras do design do menu de hamb\u00farguer?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Embora seja um padr\u00e3o de design comum, o menu hamb\u00farguer tem suas pr\u00f3prias vantagens e desvantagens:<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Espa\u00e7o:<\/strong> Ele elimina a desordem (pode afetar especialmente em telas menores), mas pode levar a recursos de navega\u00e7\u00e3o ocultos e adicionar um toque ou clique adicional para exibir esses recursos.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Interface:<\/strong> Ele permite uma apar\u00eancia limpa que aprimora a sensa\u00e7\u00e3o contempor\u00e2nea de qualquer layout, mas esse \u00edcone n\u00e3o \u00e9 comum e, portanto, pode ser uma fonte de confus\u00e3o para algumas pessoas.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>UX:<\/strong> \u00c9 \u00f3timo para diferentes tamanhos de tela devido \u00e0 sua adapta\u00e7\u00e3o, mas pode criar barreiras para usu\u00e1rios com defici\u00eancia que usam tecnologias assistivas.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\" style=\"font-size:32px\"><strong>Conclus\u00e3o<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Em design web e de aplicativos, o menu hamb\u00farguer \u00e9 um dispositivo que ajuda a economizar espa\u00e7o na estrutura\u00e7\u00e3o da navega\u00e7\u00e3o do site ou aplicativo, principalmente para telas menores.&nbsp;<\/p>\n\n\n\n<p style=\"font-size:18px\">Como em qualquer outro aspecto, considerando as vantagens e desvantagens deste recurso, os designers podem tomar uma decis\u00e3o informada sobre se devem ou n\u00e3o inclu\u00ed-lo em seus trabalhos.&nbsp;<\/p>\n\n\n\n<p style=\"font-size:18px\">Amplas evid\u00eancias sugerem que o menu hamb\u00farguer \u00e9 um recurso inestim\u00e1vel em mais de um aspecto, mas a acessibilidade e a usabilidade devem sempre ser enfatizadas durante o processo de design.<\/p>","protected":false},"excerpt":{"rendered":"<p>How does the hamburger menu function? The hamburger menu acts as a vertical or horizontal drawer that contains the navigation. At the time of the interaction, it unsheathes to show within itself a set of navigation areas, often somewhere to the right or above the window. Why is the hamburger menu so popular in web [&hellip;]<\/p>","protected":false},"author":39,"featured_media":4009,"template":"","answers_category":[28],"class_list":["post-4008","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-design"],"acf":{"image":7815,"card_image":4009,"content":[{"acf_fc_layout":"header_section","title":"What is a Hamburger Menu?","descriptions":"The hamburger menu is a minimalist navigation icon consisting of three horizontal lines (\u2630) that opens a menu of a certain website or application when clicked upon and is very often used in applications on phones or other mobile devices.\r\n\r\nThe hamburger menu icon has action and is a way of displaying extra options in a restricted screen size.","tip_label":"Pro Tip","tip":"Always write the term \u201cMenu\u201d or an ARIA label for the hamburger menu icon.","additional_tips":null,"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"There must be clear touchpoints, elements, and structure for a good experience","body":""},{"label":"Hamburger menus take up less space on the screen which is ideal for mobile screens but may lead to hidden hyperlinks","body":""},{"label":"If you have a few items for navigation or are thinking of visibility, other options can be considered","body":""}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer\/4008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer"}],"about":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/types\/answer"}],"author":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/users\/39"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media\/4009"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media?parent=4008"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answers_category?post=4008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}