{"id":30177,"date":"2022-11-04T21:16:04","date_gmt":"2022-11-04T21:16:04","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/articles\/hamburger-menu-block-overview\/"},"modified":"2025-11-10T10:38:50","modified_gmt":"2025-11-10T10:38:50","slug":"hamburger-menu-block-overview","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/hamburger-menu-block-overview\/","title":{"rendered":"Hamburger Menu Block Overview"},"content":{"rendered":"\n

JetMenu<\/em><\/a> is a plugin that enables the creation of a hamburger menu in the Gutenberg editor. With its feature, one can add the relevant content to a menu using corresponding blocks and style it as needed.<\/p>\n\n\n\n

You can proceed to the JetMenu Demo with Gutenberg Blocks<\/strong><\/a> and see the Mega Menu<\/strong> and Hamburger Menu<\/strong> blocks in action. To read about the Mega Menu <\/strong>settings, navigate to <\/strong>Mega Menu Block Overview<\/strong><\/a>.<\/p>\n\n\n\n

Menu Creation<\/strong><\/h2>\n\n\n\n

Before adding a Hamburger Menu <\/strong>block, one should create a menu in the WordPress Dashboard > Appearance > Menus<\/em><\/strong> directory. More information about mega menu creation can be found in the How to Create a Mega Menu in Elementor<\/strong><\/a> <\/strong>tutorial.<\/p>\n\n\n\n

Adding Hamburger Menu Block to Header<\/strong><\/h2>\n\n\n\n
\n

To check the Hamburger Menu <\/strong>block settings, one should add it to the header <\/em>in the Gutenberg editor<\/a>. For instance, it can be done with the JetThemeCore<\/em><\/a> <\/em>plugin.<\/p>\n\n\n\n

To do so, one should proceed to the WordPress Dashboard > Crocoblock > Theme Builder <\/em><\/strong>tab, choose the header to which the Hamburger Menu<\/strong> will be applied, click the three dots, and then hit the \u201cEdit content\u201d<\/strong> button.<\/p>\n\n\n\n

\"theme<\/a><\/div>\n\n\n\n

Once the WordPress block editor is open, one should add the Hamburger Menu <\/strong>block to the header.<\/p>\n\n\n\n

Such settings are available in the Options<\/strong> tab:<\/p>\n\n\n\n

\"the<\/a><\/div>\n\n\n\n