---
title: "How to Create a Hamburger Mobile Menu with Pattern in WordPress?"
url: https://nexterwp.com/docs/create-a-hamburger-mobile-menu-with-pattern-in-wordpress/
date: 2024-12-02
modified: 2026-06-08
author: "Aditya Sharma"
description: "Do you want to add custom content to your mobile off canvas menu in WordPress? Using a Pattern, you can display unique content such as contact details, a promo banner,..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Hamburger-Mobile-Menu-with-Pattern-in-WordPress_-1024x519.jpg
word_count: 445
---

# How to Create a Hamburger Mobile Menu with Pattern in WordPress?

## Key Takeaways

- Nexter Blocks Navigation Menu block uses a Pattern as the content source for an off canvas mobile menu in the WordPress block editor (Gutenberg).
- Create Pattern starts in Appearance > Patterns > Add New Pattern, and the header template can be created with the free Nexter Builder.
- Off Canvas mobile menus support a Show Template toggle, a Pattern dropdown, Custom Width, Toggle Style, Toggle Alignment, and Navigation Alignment for hamburger menus with contact info, CTAs, logos, or featured categories.

Do you want to add custom content to your mobile off canvas menu in WordPress? Using a Pattern, you can display unique content such as contact details, a promo banner, or social links inside the off canvas panel.

With the Navigation Menu block from [Nexter Blocks](https://nexterwp.com/docs/add-a-navigation-menu-in-wordpress/), you can use a Pattern as the content source for an off canvas mobile menu in the WordPress block editor (Gutenberg).

*To check the complete feature overview documentation of the Nexter Blocks Navigation Menu block, [click here](https://nexterwp.com/docs/add-a-navigation-menu-in-wordpress/).*

**Requirement** — This block is a part of Nexter Blocks. Make sure it is installed and activated to use this feature.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-navigation-menu/)

**Best Used For:**

- Business sites that need a branded off canvas panel with contact info, CTAs, or a logo

- Portfolio and agency sites that want a custom hamburger menu with visuals instead of a plain link list

- WooCommerce stores that display cart links, promotions, or featured categories in the mobile menu

To do this, you must first create a Pattern with the menu content.

Go to **Appearance** > **Patterns** > **Add New Pattern** to create a Pattern.

Then add the Navigation Menu block to the header template and follow the steps below.

> *Note: To create the header template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)*.*

1. From the **Navigation Bar** tab, select the appropriate **Type**, **Layout**, and menu.

2. Then go to the **Mobile Menu** tab and enable the **Responsive Mobile Menu** toggle.

![](https://nexterwp.com/wp-content/uploads/2024/12/navigation-menu-mobile-menu-off-canvas-select-pattern.gif)

In the **Open Mobile Menu (Screen Width)** section, specify the minimum screen width at which the mobile menu activates. Use a value of 768px for tablet-and-below breakpoints, or adjust to match your site layout.

3. Do not select anything in the **Mobile Menu** section.

4. From the **Menu Type** section, select **Off Canvas**.

5. Enable the **Show Template** toggle, then select your mobile menu pattern from the **Pattern** dropdown.

> *Note: You can also create a Pattern from here by clicking on the ****Create Pattern**** button.*

Set the popup width from the **Custom Width** section. Use this when your pattern includes wide content such as a multi-column layout or a featured image.

From the **Toggle Style** dropdown, select the toggle style that appears as the hamburger icon on mobile. Use this when your site header uses a custom color scheme that requires a matching toggle icon.

From the **Toggle Alignment** section, align the toggle button within the header.

From the **Navigation Alignment** section, align the menu items inside the off canvas panel.

Your Pattern will now appear as the off canvas mobile menu when visitors click the hamburger toggle. To add breadcrumb navigation to your site alongside the menu, see [How to Add Breadcrumbs in WordPress](https://nexterwp.com/docs/add-breadcrumbs-in-wordpress/).