{"id":6602,"date":"2022-09-01T04:24:17","date_gmt":"2022-09-01T04:24:17","guid":{"rendered":"https:\/\/essential-blocks.com\/?post_type=docs&#038;p=6602"},"modified":"2022-11-16T06:28:46","modified_gmt":"2022-11-16T06:28:46","password":"","slug":"eb-advanced-navigation","status":"publish","type":"docs","link":"https:\/\/essential-blocks.com\/docs\/eb-advanced-navigation\/","title":{"rendered":"EB Advanced Navigation"},"content":{"rendered":"\n<p>With the <a href=\"https:\/\/essential-blocks.com\/demo\/advanced-navigation\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>EB Advanced Navigation<\/strong><\/a><strong> <\/strong>block, you can easily add a menu to your WordPress website. It can help you provide smooth navigation to your pages &amp; posts in an organized &amp; stunning manner.<\/p>\n\n\n\n<p>Follow this step-by-step guide to add Essential Blocks Advanced Navigation using at ease.&nbsp;&nbsp;<br><strong><em>Note:<\/em><\/strong><em> <\/em><a href=\"https:\/\/essential-blocks.com\/docs\/how-to-install-essential-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>Install and activate the Essential Blocks<\/em><\/strong><\/a><em> for Gutenberg plugin into your WordPress dashboard before starting this tutorial.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How To Add Advanced Navigation Menu In Gutenberg With Essential Blocks\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Fh_3-fo45V8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>How To Activate Essential Blocks Advanced Navigation?<\/strong><\/h2>\n\n\n\n<p>To activate EB Advanced Navigation, go to \u2018<strong>Essential Blocks\u2019 \u2192 \u2018Blocks<\/strong>\u2019 from the WordPress dashboard, as shown below. Then, toggle to enable this \u2018<strong>Advanced Navigation<\/strong>\u2019 block. After that, click on the \u2018<strong>Save<\/strong>\u2019 button to get started.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1200\" height=\"589\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-13.gif\" alt=\"EB Advanced Navigation\" class=\"wp-image-6603\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>How To Configure Essential Blocks Advanced Navigation?<\/strong><\/h2>\n\n\n\n<p>Now, open the page where you want to insert a navigation menu in Gutenberg. Then click on the <strong>\u2018+\u2019 <\/strong>button and search for the \u2018<strong>Advanced Navigation<\/strong>\u2019 block. Simply click on the block when it appears, and it will be added instantly to your web page.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1200\" height=\"564\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-14.gif\" alt=\"EB Advanced Navigation\" class=\"wp-image-6604\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>Alternatively, you can also add this block to your web page by clicking on the \u2018<strong>+<\/strong>\u2019 icon from the top left corner and then search for \u2018<strong>Advanced Navigation<\/strong>\u2019. When it appears, simply drag and drop the block to your web page.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1200\" height=\"564\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-15.gif\" alt=\"EB Advanced Navigation\" class=\"wp-image-6605\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>Once you have added the EB Advanced Navigation block to your website, you need to link the pages that you want to showcase on the navigation menu. So, hit the navigation bar block and click on the <strong>\u2018Start empty\u2019 <\/strong>option that appears, and then click again on the \u2018<strong>+\u2019 <\/strong>icon.&nbsp;<br>Now, choose and enter the page or post link that you want to add to your navigation menu. By clicking on the \u2018<strong>+<\/strong>\u2019 icon that appears again, you can add as many pages or posts as you want to add to your navigation bar.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1200\" height=\"564\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-16.gif\" alt=\"EB Advanced Navigation\" class=\"wp-image-6606\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>Similarly, you can also add a submenu for each of the menu items and make your navigation block even more helpful for your visitors. To do so, select the navigation item where you want to include submenus, click on the &#8216;<strong>Submenu add<\/strong>&#8216; icon which appears on the block option bar, and add pages or posts under it.<br>After you hit the \u2018<strong>Add submenu<\/strong>\u2019 icon and click on the \u2018<strong>+<\/strong>\u2019 icon below the menu that you have inserted for adding the submenu link. Here, you can add the link to your chosen page or post that you want to add as a submenu. Similarly, you can submenus to each navigation item easily.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1200\" height=\"564\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-17.gif\" alt=\"EB Advanced Navigation\" class=\"wp-image-6607\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>Now, if you want to choose a separate navigation menu click on the Navigation Icon and go to the side panel. From the \u2018<strong>Menu<\/strong>\u2019 option hit on \u2018<strong>Navigation<\/strong>\u2019 to open the drop-down menu. Click on the \u2018<strong>Create new menu\u2019 <\/strong>to add a new navigation menu on your WordPress site and select it as your active menu.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"752\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/11\/image-30.gif\" alt=\"EB Advanced Navigation\" class=\"wp-image-7746\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>Click on the \u2018<strong>+<\/strong>\u2019 icon and choose and enter the page or post link that you want to add to your navigation menu as shown earlier.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"752\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/11\/image-31.gif\" alt=\"EB Advanced Navigation\" class=\"wp-image-7747\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>General<\/strong><\/h3>\n\n\n\n<p>To customize the block to your needs, click on the navigation icon from the block option bar and select <strong>\u2018Advanced Navigation\u2019 <\/strong>to open the Gutenberg Settings<strong> <\/strong>panel on the sidebar. Then, go to the <strong>\u2018General<\/strong>\u2019 tab to customize.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1200\" height=\"564\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-18.gif\" alt=\"EB Advanced Navigation\" class=\"wp-image-6608\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><strong>LAYOUT<\/strong><\/strong><\/h4>\n\n\n\n<p>From the \u2018<strong>Layout<\/strong>\u2019 section, you can customize the menu \u2018<strong>Orientation<\/strong>\u2019, and you can display the navigation bar in a <strong>Vertical or Horizontal<\/strong> orientation. Then, you can also choose a preset from the <strong>\u2018Preset<\/strong>\u2019 option from available ready design styles and align the menu items as needed.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1920\" height=\"902\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/09\/chrome_awLRKLHVL5.gif\" alt=\"EB Advanced Navigation\" class=\"wp-image-7710\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>DROPDOWN MENUS<\/strong><\/h4>\n\n\n\n<p>You can customize the drop-down menu from this option. Toggle on the <strong>\u2018Open on Click\u2019 <\/strong>button if you want to open the drop-down submenu after clicking on the menu item. Also, if you don\u2019t want to showcase the <strong>dropdown icon<\/strong>, toggle it off from there.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1920\" height=\"902\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/09\/chrome_VzSZ5NtHEM.gif\" alt=\"EB Advanced Navigation\" class=\"wp-image-7709\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><strong>Hamburger Menu<\/strong><\/strong><\/h4>\n\n\n\n<p>From the Hamburger Menu option, you can optimize your navigation menu, and make it compatible with the screen sizes of different devices. You can also select the <strong>\u2018Button Type\u2019 <\/strong>and choose the \u2018<strong>Display Hamburger Menu<\/strong>\u2019 option from there.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1920\" height=\"902\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/09\/chrome_2sdl7PFA2M.gif\" alt=\"EB Advanced Navigation\n\" class=\"wp-image-7708\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Styles<\/strong><\/h3>\n\n\n\n<p>From the \u2018<strong>Styles<\/strong>\u2019 tab, you can personalize the appearance of the Advanced Navigation block. You will get plenty of options to customize the navigation menu.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><strong>Navigation<\/strong><\/strong><\/h4>\n\n\n\n<p>From the \u2018<strong>Navigation\u2019<\/strong> option, you will find the options for choosing<strong> \u2018Typography\u2019<\/strong> for the navigation menu. Add the \u2018<strong>Padding<\/strong>\u2019 &amp; \u201c<strong>Margin<\/strong>\u2019 from there to the navigation bar.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1920\" height=\"934\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/11\/screely-1668430417862.png\" alt=\"EB Advanced Navigation\" class=\"wp-image-7706\" title=\"\" srcset=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/11\/screely-1668430417862.png 1920w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/11\/screely-1668430417862-300x146.png 300w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/11\/screely-1668430417862-1024x498.png 1024w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/11\/screely-1668430417862-768x374.png 768w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/11\/screely-1668430417862-360x175.png 360w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/11\/screely-1668430417862-1536x747.png 1536w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/11\/screely-1668430417862-600x292.png 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<p>On the \u2018<strong>Navigation<\/strong>\u2019 option, you can customize the color of your navigation menu from the <strong>\u2018Color\u2019 <\/strong>option. Adjust the color of the menu and add a hover effect from there. Also, select the color for the active page menu from the \u2018<strong>Active Color<\/strong>\u2019 option.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1200\" height=\"564\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-22.gif\" alt=\"EB Advanced Navigation\" class=\"wp-image-6613\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Dropdown Menu<\/strong><\/h4>\n\n\n\n<p>From the Dropdown Menu option, you can personalize the navigation menu container and its items easily. You can style the \u2018<strong>Background<\/strong>\u2019, \u2018<strong>Border &amp; Shadow<\/strong>\u2019, and \u2018<strong>Padding<\/strong>\u2019 for the container from there. Similarly, you can personalize the \u2018<strong>Typography<\/strong>\u2019, \u2018<strong>Padding<\/strong>\u2019, and colors easily.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1200\" height=\"564\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-23.gif\" alt=\"EB Advanced Navigation\" class=\"wp-image-6614\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Caret<\/strong><\/h4>\n\n\n\n<p>The <strong>\u2018Caret\u2019<\/strong> option will let you customize the size and color of the drop-down menu indicator icon easily. You can also a hover effect for the Caret from there.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"778\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-12.png\" alt=\"EB Advanced Navigation\" class=\"wp-image-6615\" title=\"\" srcset=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-12.png 1600w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-12-300x146.png 300w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-12-1024x498.png 1024w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-12-768x373.png 768w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-12-1536x747.png 1536w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-12-600x292.png 600w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Hamburger Menu<\/strong><\/h4>\n\n\n\n<p>Now, personalize the <strong>\u2018Hamburger Menu\u2019<\/strong> from there as well. Adjust the <strong>typographies, colors, and paddings<\/strong> for the buttons, container, and items as you want. In addition, you can customize the color and alignment for the \u2018<strong>Close Icon<\/strong>\u2019 from there.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1200\" height=\"564\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-25.gif\" alt=\"EB Advanced Navigation\" class=\"wp-image-6616\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Advanced<\/strong><\/h3>\n\n\n\n<p>From the \u2018<strong>Advanced<\/strong>\u2019 tab, you will get all the options for advanced customization for the navigation menu. You can customize<strong> Margin Padding<\/strong>,&nbsp; <strong>Background, Border &amp; Shadow, Responsive Control, Animation, <\/strong>and<strong> Custom CSS<\/strong>. Using these options you can add more styling to the Advanced Navigation block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1200\" height=\"564\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-26.gif\" alt=\"EB Advanced Navigation\" class=\"wp-image-6617\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>Final Outcome<\/strong><\/h2>\n\n\n\n<p>After making all the changes hit the \u2018<strong>Update\/ Publish<\/strong>\u2019 button and you will see your EB Advanced Navigation block displaying on your website. By following the simple and easy steps, you can add the <strong>EB Advanced Navigation block<\/strong> and style it in Gutenberg.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1200\" height=\"589\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/08\/image-27.gif\" alt=\"EB Advanced Navigation\" class=\"wp-image-6618\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>Here\u2019s how you can easily configure and design your <strong>&nbsp;EB Advanced Navigation block<\/strong> in Gutenberg.&nbsp;<\/p>\n\n\n\n<p>Got stuck? Feel free to<strong> <\/strong><a href=\"https:\/\/wordpress.org\/support\/plugin\/essential-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>contact our support <\/strong><\/a>for further assistance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Follow this tutorial to learn how to create and design your navigation menu bar with EB Advanced Navigation Block from Essential Blocks for Gutenberg. <\/p>\n","protected":false},"author":17,"featured_media":6618,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","footnotes":""},"doc_category":[162],"doc_tag":[317,318,13,21,16],"class_list":["post-6602","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-creative-blocks","doc_tag-advanced-navigation","doc_tag-eb-advanced-navigation","doc_tag-gutenberg-block","doc_tag-gutenberg-editor","doc_tag-wordpress"],"year_month":"2026-04","word_count":1004,"total_views":"3921","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Ahmed Kawser","author_nicename":"ahmed","author_url":"https:\/\/essential-blocks.com\/author\/ahmed\/"},"doc_category_info":[{"term_name":"Creative Blocks","term_url":"https:\/\/essential-blocks.com\/docs-category\/creative-blocks\/"}],"doc_tag_info":[{"term_name":"Advanced Navigation","term_url":"https:\/\/essential-blocks.com\/docs-tag\/advanced-navigation\/"},{"term_name":"EB Advanced Navigation","term_url":"https:\/\/essential-blocks.com\/docs-tag\/eb-advanced-navigation\/"},{"term_name":"gutenberg block","term_url":"https:\/\/essential-blocks.com\/docs-tag\/gutenberg-block\/"},{"term_name":"Gutenberg editor","term_url":"https:\/\/essential-blocks.com\/docs-tag\/gutenberg-editor\/"},{"term_name":"WordPress","term_url":"https:\/\/essential-blocks.com\/docs-tag\/wordpress\/"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/6602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/users\/17"}],"version-history":[{"count":14,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/6602\/revisions"}],"predecessor-version":[{"id":7745,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/6602\/revisions\/7745"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/media\/6618"}],"wp:attachment":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/media?parent=6602"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/doc_category?post=6602"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/doc_tag?post=6602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}