---
title: Menu
description: The Menu Block lets you create a responsive navigation menu with links, nested dropdowns, icons, and descriptions. You can add links manually or import an existing WordPress menu, customize menu orientation and spacing, control dropdown behavior, and style desktop and…
url: "https://shapekode.com/product/shapeblock/docs/menu/"
updated: "2026-10-17"
category: "Header & Footer Block"
---

# Menu

The Menu Block lets you create a responsive navigation menu with links, nested dropdowns, icons, and descriptions. You can add links manually or import an existing WordPress menu, customize menu orientation and spacing, control dropdown behavior, and style desktop and mobile navigation separately.

## How to Add a Menu Block

Follow these steps to add the Menu Block to your page or post.

### Step 1: Add the Menu Block

1. Open the page or post where you want to add the Menu Block.
2. Click the **+ (Add Block)** button.
3. Search for **Menu** in the block search field.
4. Select the **Menu** block from the ShapeBlock category.
5. The block will be added to your editor.
6. Select the block to access its customization options in the sidebar.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-75.png)

### Step 2: Configure the Menu Block

The Menu Block includes three tabs for customization:

- **Settings:** Add and manage menu items, import an existing WordPress menu, configure dropdowns, and set mobile menu behavior.
- **Layout:** Choose the menu orientation, alignment, item spacing, and responsive drawer settings.
- **Style:** Customize menu colors, dropdown colors, mobile colors, hamburger and close buttons, and typography.

## Settings Tab

The Settings tab contains the following panels.

### 1. Import from WordPress Menu

- **Menu:** Select an existing menu created under **Appearance → Menus** in WordPress.
- **Load menu items:** Import the selected WordPress menu into the block. This replaces the menu items currently configured in the block.
- If no WordPress menus are available, create one under **Appearance → Menus** first.

### 2. Menu Items

Each top-level menu item has its own expandable panel. You can add menu items using the **+ Add Item** button and choose a page, post, or URL.

- **Label:** Set the text displayed for the menu item. You can also apply bold or italic formatting in the editor preview.
- **Link:** Choose the destination page, post, or URL for the menu item.
- **Description:** Add optional descriptive text below the menu label.
- **Open in new tab:** Open the linked destination in a new browser tab.
- **Icon:** Enable or disable an icon for the menu item.
- **Type:** Choose the type of icon to display when Icon is enabled.
  - **Icon:** Select an available built-in icon.
  - **Image:** Upload an image to use as the menu item icon.
- **Icon Side:** Choose where the icon appears relative to the menu text.
  - **Left**
  - **Right**
- **Dropdown Items:** Add nested menu items under the current item. You can create multiple levels of dropdowns.
- **Move Up / Move Down:** Change the order of menu items.
- **Remove item / Remove sub-item:** Remove the selected menu item or nested item.

### 3. Dropdown

- **Submenu Visibility:** Choose how dropdown menus open on the frontend.
  - **Hover:** Open the dropdown when visitors hover over the menu item.
  - **Click:** Open the dropdown when visitors click the menu item.
- **Dropdown Icon:** Choose the indicator displayed beside items that contain dropdown menus.
  - **Caret**
  - **Chevron**
  - **Arrow**
  - **Plus**
  - **None**

### 4. Mobile Menu

- **Overlay Visibility:** Choose how the mobile navigation drawer is displayed.
  - **Off:** Keep the regular menu visible on all screen sizes.
  - **Mobile:** Display the hamburger menu and drawer below the configured breakpoint.
  - **Always:** Display the hamburger menu on every screen size.
- **Mobile breakpoint (px):** Set the screen-width threshold below which the hamburger menu and off-canvas drawer appear. This option is available when **Mobile** is selected.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-76.png)

## Layout Tab

The Layout tab contains the following panels.

### 1. Menu Layout

- **Orientation:** Choose how the menu items are arranged.
  - **Horizontal:** Display menu items in a row.
  - **Vertical:** Display menu items in a column.
- **Justification:** Set the alignment of the menu items.
  - **Left**
  - **Center**
  - **Right**
- **Item Gap:** Adjust the space between menu items separately for desktop, tablet, and mobile devices.
  - **Def:** Use the default spacing.
  - **S:** Set the gap to 10px.
  - **M:** Set the gap to 20px.
  - **L:** Set the gap to 32px.
  - **Custom:** Enter a custom gap using the Custom Gap control.
- **Custom Gap (px):** Set a custom spacing value from 0 to 80 pixels. This control appears when Custom is selected.
- **Allow to wrap to multiple lines:** Allow menu items to wrap onto additional lines when they do not fit in a single row.

### 2. Responsive

This panel appears when **Overlay Visibility** is set to Mobile or Always.

- **Drawer opens from:** Choose the side from which the off-canvas mobile menu opens.
  - **Left**
  - **Right**
- **Drawer width (px):** Set the width of the mobile navigation drawer.
- **Hamburger Alignment:** Align the hamburger menu button separately for desktop, tablet, and mobile devices.
  - **Left**
  - **Center**
  - **Right**
  - **Inherit:** Available for tablet and mobile when you want to inherit the alignment from the larger screen.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-77.png)

## Style Tab

The Style tab contains panels for customizing menu colors, dropdown appearance, mobile navigation, buttons, and typography. The Mobile Colors and Hamburger & Close Buttons panels include options that depend on the selected mobile menu mode.

### 1. Colors

- **Item Text:** Customize the menu item text color for each state.
  - **Text:** Set the normal text color.
  - **Hover:** Set the text color when visitors hover over an item.
  - **Active:** Set the text color for the active menu item.
- **Item Background:** Customize the background color or gradient for each state.
  - **Normal:** Set the default background.
  - **Hover:** Set the background displayed on hover.
  - **Active:** Set the background for the active menu item.
- **Description Color:** Customize the color of the descriptive text displayed below menu labels.

### 2. Dropdown Colors

- **Dropdown Background:** Set the background color or gradient for dropdown menus.
- **Dropdown Item Text:** Customize the dropdown item text color for each state.
  - **Text:** Set the normal text color.
  - **Hover:** Set the text color displayed on hover.
- **Dropdown Item Hover Background:** Set the background color or gradient displayed when visitors hover over a dropdown item.

### 3. Mobile Colors

- **Drawer Background:** Set the background color or gradient of the mobile navigation drawer. This option appears when the mobile overlay is enabled.
- **Item Text:** Customize mobile menu item text colors.
  - **Text:** Set the normal text color.
  - **Hover:** Set the hover text color.
  - **Active:** Set the active item text color.
- **Item Background:** Customize mobile menu item backgrounds.
  - **Normal:** Set the default background color or gradient.
  - **Hover:** Set the background color or gradient displayed on hover.
  - **Active:** Set the background color or gradient for the active item.

### 4. Hamburger & Close Buttons

This panel appears when **Overlay Visibility** is set to Mobile or Always.

- **Button:** Choose which button to customize.
  - **Hamburger:** Customize the button that opens the mobile navigation drawer.
  - **Close:** Customize the button that closes the drawer.
- **State:** Choose the appearance state for the selected button.
  - **Normal**
  - **Hover**
- **Icon Color:** Set the icon color for the selected button and state.
- **Background:** Set a background color or gradient for the selected button and state.
- **Border Color:** Customize the border color for the selected button and state.
- For the Close button in its Normal state, leaving Icon Color empty allows it to follow the hamburger icon color.

### 5. Typography

- **Font Family:** Choose the font family for menu text.
- **Font Size:** Adjust the menu text size separately for desktop, tablet, and mobile devices.
  - **Def:** Use the default size.
  - **S:** Set the size to 14px.
  - **M:** Set the size to 16px.
  - **L:** Set the size to 18px.
  - **XL:** Set the size to 22px.
  - **Custom:** Enter a custom size using the Custom Size control.
- **Custom Size (px):** Set a custom font size from 8 to 72 pixels. This control appears when Custom is selected.
- **Font Weight:** Choose the text weight.
  - **Def**
  - **400**
  - **500**
  - **600**
  - **700**
- **Text Transform:** Choose how the menu text capitalization is displayed.
  - **Def**
  - **Uppercase**
  - **Lowercase**
  - **Capitalize**
  - **None**

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-78.png)