{"id":15191692,"date":"2022-01-05T22:51:40","date_gmt":"2022-01-05T22:51:40","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=15191692"},"modified":"2024-06-08T17:44:33","modified_gmt":"2024-06-08T17:44:33","slug":"navigation-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/navigation-block\/","title":{"rendered":"Navigation block"},"content":{"rendered":"\n<p>The <em>Navigation Block<\/em> is an advanced block in WordPress 5.9 that enables you to edit your site&#8217;s navigation menu, both in terms of structure and design. The <em>Navigation block<\/em> can be used with a <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/themes\/tags\/full-site-editing\/\" target=\"_blank\">block theme<\/a> or a theme that has support for <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/themes\/tags\/template-editing\/\" target=\"_blank\">template editing<\/a>.<\/p>\n\n\n\n<p>In order to add a <em>Navigation block<\/em>, click on the add block button and select the <em>Navigation block<\/em>. You can also type \u201c\/navigation\u201d and hit enter in a new paragraph block to add one quickly.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f4fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/adding-a-new-block\/\">Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n<p>The <em>Navigation Block <\/em>has a dedicated list view tab in the settings panel where you can configure and customize the navigation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-configuration\">Block Configuration<\/h2>\n\n\n\n<p>When you add a <em>Navigation<\/em> <em>block <\/em>for the first time and don\u2019t have any existing menu, it will start with a <em>Page List block<\/em>. <\/p>\n\n\n\n<p>To start editing the menu, open the <strong>Settings<\/strong> panel, and select <strong>Page List<\/strong> from the list view. Click <strong>Edit<\/strong>, and the page list items will transform into <em>Page Link<\/em> blocks.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2144\" height=\"1004\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-page-list.png\" alt=\"The navigation block with the &quot;Page List&quot; visible and the &quot;Edit&quot; button highlighted.\" class=\"wp-image-16356200\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-page-list.png 2144w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-page-list-300x140.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-page-list-1024x480.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-page-list-768x360.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-page-list-1536x719.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-page-list-2048x959.png 2048w\" sizes=\"auto, (max-width: 2144px) 100vw, 2144px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a new menu<\/h3>\n\n\n\n<p>You can create a new menu from scratch via the <em>Navigation block<\/em>\u2019s list view in the settings panel. Click the <strong>Menu <\/strong>options button and select <strong>Create a new menu<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"649\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-create-menu.gif\" alt=\"Creating a new menu.\" class=\"wp-image-16356201\" \/><\/figure>\n\n\n\n<p>The next step is to add individual blocks to your navigation. You can do so from the editor canvas or the list view in the settings panel.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-adding-items-sidebar.mov\"><\/video><figcaption class=\"wp-element-caption\">Adding menu items using the sidebar<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-adding-items-canvas.mp4\"><\/video><figcaption class=\"wp-element-caption\">Adding menu items using the canvas editor<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Selecting an existing menu<\/h3>\n\n\n\n<p>To use another menu for a navigation block, you can select different menus from the list view in the settings panel. Click the <strong>Menu <\/strong>options button and select the available menus from the drop-down.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-select-existing-menu.mp4\"><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Deleting and managing menus<\/h3>\n\n\n\n<p>If you want to delete the selected menu, go to the <strong>Settings <\/strong>tab on the block settings panel and open the <strong>Advanced <\/strong>section.&nbsp;<\/p>\n\n\n\n<p>Click the <strong>Delete menu <\/strong>button, and a prompt will appear to confirm your action.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-delete-menu.mp4\"><\/video><\/figure>\n\n\n\n<p>Once you\u2019ve clicked <strong>Confirm<\/strong>, the menu will be deleted, and the navigation block will be replaced with a placeholder. You can then start creating a new menu or selecting an existing one from the settings panel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Block customization<\/h2>\n\n\n\n<p>You can customize the <em>Navigation block <\/em>content from the block settings list view and the editor canvas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding menu items<\/h3>\n\n\n\n<p><strong>Using the block settings view<\/strong><\/p>\n\n\n\n<p>To add a menu item from the block settings view, click the <strong>Add block <\/strong>icon (<strong>+<\/strong>) and choose or search for the block you want to add. Alternatively, you can click <strong>Browse all<\/strong> to open the block inserter panel and see all blocks you can add to the navigation.<\/p>\n\n\n\n<p>When you select a block like <em>Page Link<\/em> or <em>Custom Link<\/em>, a pop-up will appear where you can search or enter the URL for the menu item, toggle the <strong>Open in new tab<\/strong> option, and transform the block to another type.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-adding-items-side-settings-2-1.mp4\"><\/video><\/figure>\n\n\n\n<p><strong>Using the editor canvas<\/strong><\/p>\n\n\n\n<p>To add a menu item from the editor canvas, click the <strong>Add block <\/strong>icon (<strong>+<\/strong>) inside the <em>Navigation block<\/em>. It will insert a new <em>Custom Link<\/em> block, and a pop-up will appear where you can search or enter the URL for the menu item, toggle the <strong>Open in new tab<\/strong> option, and transform the block to another type.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-adding-items-canvas-2-1.mp4\"><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Adding submenu items<\/h3>\n\n\n\n<p><strong>Using the block settings view<\/strong><\/p>\n\n\n\n<p>To add a submenu for a menu item, click the <strong>Options <\/strong>button on the menu and select <strong>Add submenu link<\/strong>. It will add a <em>Custom Link <\/em>block as a submenu, and a pop-up will appear where you can search or enter the URL for the menu item, toggle the <strong>Open in new tab<\/strong> option, and transform the block to <em>Page List<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"625\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-adding-submenu-items.gif\" alt=\"Adding a submenu item using the navigation block settings in the sidebar\" class=\"wp-image-16356217\" \/><\/figure>\n\n\n\n<p><strong>Using the editor canvas<\/strong><\/p>\n\n\n\n<p>To add a submenu from the editor canvas, select the page link where you want to add the submenu and click <strong>Add submenu<\/strong> button on the toolbar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"650\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-adding-submenu-items-canvas.gif\" alt=\"\" class=\"wp-image-16356218\" \/><\/figure>\n\n\n\n<p>It will add a <em>Custom Link <\/em>block as a submenu, and a pop-up will appear where you can search or enter the URL for the menu item, toggle the <strong>Open in new tab<\/strong> option, and transform the block to <em>Page List<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-open-new-tab-edited.png\" alt=\"Open link in new tab\" class=\"wp-image-16356220\" width=\"426\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-open-new-tab-edited.png 1016w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-open-new-tab-edited-300x221.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-open-new-tab-edited-768x566.png 768w\" sizes=\"(max-width: 1016px) 100vw, 1016px\" \/><\/figure>\n\n\n\n<p>You can add more submenu items by clicking the <strong>Add block<\/strong> button on the submenu drop-down.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-open-new-submenu-1024x705.png\" alt=\"Add submenu item to an existing submenu.\" class=\"wp-image-16356222\" width=\"445\" height=\"306\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-open-new-submenu-1024x705.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-open-new-submenu-300x206.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-open-new-submenu-768x529.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-open-new-submenu.png 1116w\" sizes=\"auto, (max-width: 445px) 100vw, 445px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Rearranging menu items<\/h3>\n\n\n\n<p><strong>Using the block settings view<\/strong><\/p>\n\n\n\n<p>The list view in the <em>Navigation block <\/em>settings panel lets you rearrange the menu items by dragging and dropping each of them.<\/p>\n\n\n\n<p>To rearrange the order of the menu items, simply drag and drop them to the new position.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"679\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-move-items.gif\" alt=\"Moving a menu item in the navigation settings sidebar\" class=\"wp-image-16356224\" \/><\/figure>\n\n\n\n<p>To rearrange a menu item to create a new submenu, drag the menu item slightly right before dropping it. You will notice the blue line will shift towards the right.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"511\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-move-items-submenu.gif\" alt=\"Moving a menu item to a submenu in the navigation settings sidebar\" class=\"wp-image-16356225\" \/><\/figure>\n\n\n\n<p>To move a menu item into an existing submenu, drag the menu item into the submenu list.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"575\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-move-items-submenu-2.gif\" alt=\"Moving a menu item to a different submenu in the navigation settings sidebar\" class=\"wp-image-16356226\" \/><\/figure>\n\n\n\n<p><strong>Using the editor canvas<\/strong><\/p>\n\n\n\n<p>To rearrange the menu items in the editor canvas, you can use the block moving tools in the menu item\u2019s block toolbar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-move-items-canvas-1.gif\" alt=\"Moving a menu item in the canvas\" class=\"wp-image-16356229\" width=\"405\" height=\"283\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Removing menu items<\/h3>\n\n\n\n<p><strong>Using the block settings view<\/strong><\/p>\n\n\n\n<p>To remove a menu or submenu item via the list view, click the <strong>Options <\/strong>button on the item and select <strong>Remove [menu item name]<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-remove-item.png\" alt=\"\" class=\"wp-image-16356231\" width=\"332\" height=\"435\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-remove-item.png 664w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-remove-item-229x300.png 229w\" sizes=\"auto, (max-width: 332px) 100vw, 332px\" \/><\/figure>\n\n\n\n<p><strong>Using the editor canvas<\/strong><\/p>\n\n\n\n<p>To remove a menu or submenu item from the editor canvas, select the menu item block you want to remove. Open the <strong>Options <\/strong>menu from the block toolbar and select <strong>Remove [menu item name]<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-remove-item-sidebar-1024x820.png\" alt=\"\" class=\"wp-image-16356232\" width=\"499\" height=\"399\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-remove-item-sidebar-1024x820.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-remove-item-sidebar-300x240.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-remove-item-sidebar-768x615.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-remove-item-sidebar.png 1222w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Editing link settings<\/h3>\n\n\n\n<p><strong>Using the block settings view<\/strong><\/p>\n\n\n\n<p>To edit the link settings, click on the menu item in the list view, and it will open the settings panel for the selected link block. Here are the settings available:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Label<\/li>\n\n\n\n<li>URL<\/li>\n\n\n\n<li>Description<\/li>\n\n\n\n<li>Link title<\/li>\n\n\n\n<li>Link rel<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"817\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-menu-link-settings-1024x817.png\" alt=\"Links settings\" class=\"wp-image-16356233\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-menu-link-settings-1024x817.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-menu-link-settings-300x239.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-menu-link-settings-768x613.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-menu-link-settings-1536x1225.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-menu-link-settings.png 1818w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can also add a custom CSS class and customize the link typography and dimensions from the settings panel.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/Screen-Shot-on-2023-03-28-at-154625.png\" alt=\"Adding a custom CSS class\" class=\"wp-image-16356234\" width=\"372\" height=\"273\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/Screen-Shot-on-2023-03-28-at-154625.png 828w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/Screen-Shot-on-2023-03-28-at-154625-300x220.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/Screen-Shot-on-2023-03-28-at-154625-768x564.png 768w\" sizes=\"auto, (max-width: 372px) 100vw, 372px\" \/><\/figure>\n\n\n\n<p><strong>Using the editor canvas<\/strong><\/p>\n\n\n\n<p>To edit the link from the editor canvas, select the menu item block you want to edit and click the <strong>Link<\/strong> button on the block toolbar. It will open a pop-up where you can edit or remove the link and toggle the <strong>Open in new tab<\/strong> option.If you click the <strong>Edit<\/strong> button for the link, you can change the menu item text and URL.<\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Block toolbar<\/h2>\n\n\n\n<p>Every block has unique toolbar icons and blocks specific user controls that allow you to manipulate the block right in the editor.<\/p>\n\n\n\n<p>The <em>Navigation block<\/em> has the following options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Transform<\/li>\n\n\n\n<li>Block moving tools<\/li>\n\n\n\n<li>Items justification<\/li>\n\n\n\n<li>Options<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Transform<\/h3>\n\n\n\n<p>When you click the <strong>Transform <\/strong>button, you can convert the <em>Navigation block<\/em> into <em>Columns <\/em>and <em>Group <\/em>blocks.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-transform.png\" alt=\"Options to convert the navigation menu into a different block\" class=\"wp-image-16356247\" width=\"387\" height=\"189\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-transform.png 860w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-transform-300x147.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-transform-768x377.png 768w\" sizes=\"auto, (max-width: 387px) 100vw, 387px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Block moving tools<\/h3>\n\n\n\n<p>To drag and drop the block to a new location on the page template, click and hold the <strong>Drag <\/strong>button, then drag it to the new location. The blue separator line indicates where the block will be placed. Release the left mouse button when you find the new location to place the block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"240\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-drag.gif\" alt=\"Dragging around a navigation menu\" class=\"wp-image-16356249\" \/><\/figure>\n\n\n\n<p>The <strong>Move up<\/strong> and<strong> Move down<\/strong> buttons can be used to move the block up and down on the page. If the <em>Navigation block <\/em>is in a <em>Row block<\/em>, the buttons will change to left and right.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"902\" height=\"240\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-move-arrows.gif\" alt=\"Moving a navigation menu using arrows\" class=\"wp-image-16356250\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Change items justification<\/h3>\n\n\n\n<p>Click the <strong>Change items justification<\/strong> button in the block toolbar to display the justification drop-down. You can justify the block text to the left, make it center-justified, align it to the right or leave a space between items.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-justification.png\" alt=\"\" class=\"wp-image-16356253\" width=\"647\" height=\"239\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-justification.png 1460w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-justification-300x111.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-justification-1024x379.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-justification-768x284.png 768w\" sizes=\"auto, (max-width: 647px) 100vw, 647px\" \/><\/figure>\n\n\n\n<p>Alignment options can also be changed from the sidebar settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"297\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-alignment.gif\" alt=\"How to change the justification of the different items inside a Navigation Block\" class=\"wp-image-16356252\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Options<\/h3>\n\n\n\n<p>The <strong>Options <\/strong>button on a block toolbar gives you more features to customize the block.<\/p>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/support\/article\/more-options\/\">Read about these and other settings.<\/a> When you enable the block lock for the <em>Navigation block<\/em>, you will find the <strong>Restrict editing<\/strong> option, which will prevent menu items from getting edited.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-settings\">Block Settings<\/h2>\n\n\n\n<p>Every block has a specific settings panel to customize the block. To open it, click the <strong>Settings <\/strong>button next to the <strong>Publish <\/strong>button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"display\">Display<\/h3>\n\n\n\n<p>Currently, this section consists of one setting that allows you to control what is shown for the <em>Navigation block<\/em> across different screen sizes, allowing for a responsive menu option:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Off: <\/strong>This turns off displaying a menu icon when on smaller screen sizes.&nbsp;<\/li>\n\n\n\n<li><strong>Mobile: <\/strong>This enables a menu icon to be displayed when viewing your site on smaller screens that one can click on to see the entire menu.&nbsp;<\/li>\n\n\n\n<li><strong>Always:<\/strong> This enables the menu icon to be displayed regardless of screen size.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>By default, this option is set to <strong>Mobile<\/strong>, which will automatically show a menu icon on smaller screen sizes. When you click on the menu icon, it will open up an overlay that shows your entire menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-mobile.png\" alt=\"Display options on the Navigation block\" class=\"wp-image-16356258\" width=\"275\" height=\"381\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-mobile.png 556w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-mobile-217x300.png 217w\" sizes=\"auto, (max-width: 275px) 100vw, 275px\" \/><\/figure>\n\n\n\n<p>There are two additional settings specifically for submenus:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Open on click:<\/strong> By default, submenus will open on hover. You can activate this option if you prefer them to open by clicking on them.<\/li>\n\n\n\n<li><strong>Show arrow:<\/strong> By default, menu items that have submenus beneath them will display an arrow to indicate this. You can de-activate this option to hide those arrows.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"layout\">Layout<\/h3>\n\n\n\n<p>Layout settings allow you to change the justification and orientation of child blocks nested inside their parent blocks, with layout controls found on the parent blocks.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f4fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/layout-settings-overview\/\">This article provides details about layout settings.<\/a>&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"color\">Color<\/h3>\n\n\n\n<p>These color settings allow you to customize the appearance of your <em>Navigation block<\/em>. Pick a color from the suggestions, or add a custom color using the color picker or by adding a color code.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f4fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/colors-settings-overview\/\">See this guide for more information about changing colors.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"typography\">Typography<\/h3>\n\n\n\n<p>Typography settings allow you to change a block\u2019s font size, appearance, line height, letter casing, and spacing.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f4fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/colors-settings-overview\/\"><\/a><a href=\"https:\/\/wordpress.org\/documentation\/article\/typography-settings-overview\/\">Get more details about changing typography settings.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"dimensions\">Dimensions<\/h3>\n\n\n\n<p>The <em>Navigation block<\/em> currently supports Block Spacing, which allows you to add custom spacing between each block. This makes it easy to set a uniform appearance across the entire block.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f4fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/colors-settings-overview\/\"><\/a><a href=\"https:\/\/wordpress.org\/documentation\/article\/typography-settings-overview\/\"><\/a><a href=\"https:\/\/wordpress.org\/documentation\/article\/dimension-controls-overview\/\">Learn more about dimension controls.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced<strong> <\/strong><\/h3>\n\n\n\n<p>The advanced tab lets you accomplish a few things:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Rename the menu.<\/li>\n\n\n\n<li>Delete the menu.<\/li>\n\n\n\n<li>Add a CSS class in order to style the block as you\u2019d like.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-advanced.png\" alt=\"Advanced menu options\" class=\"wp-image-16356255\" width=\"249\" height=\"278\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-advanced.png 562w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/navigation-block-advanced-268x300.png 268w\" sizes=\"auto, (max-width: 249px) 100vw, 249px\" \/><\/figure>\n\n\n\n<div id=\"changelog\" class=\"wp-block-group changelog has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"background-color:#dce5ec\">\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"changelog\">Changelog<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Updated 2023<\/strong>-03-28\n<ul class=\"wp-block-list\">\n<li>Updated the article to match the current state in WordPress 6.2<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Updated <\/strong>2023-02-17\n<ul class=\"wp-block-list\">\n<li>Updated the Block Configuration section<\/li>\n\n\n\n<li>Updated some screenshots<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Created<\/strong> 2022-01-05<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Navigation Block is an advanced block in WordPress 5.9 that enables you to edit your site&#8217;s navigation menu, both in terms of structure and design. The Navigation block can be used with a block theme or a theme that has support for template editing. In order to add a Navigation block, click on the [&hellip;]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[80,91],"class_list":["post-15191692","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-theme-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/15191692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=15191692"}],"version-history":[{"count":27,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/15191692\/revisions"}],"predecessor-version":[{"id":16360346,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/15191692\/revisions\/16360346"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=15191692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=15191692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}