---
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-09-13
lang: en
author: "Aditya Sharma"
description: "Instead of a plain list of links, your mobile menu can show a designed panel with your logo, key links, contact details or an offer. The Navigation Menu block in..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Hamburger-Mobile-Menu-with-Pattern-in-WordPress_-1024x519.jpg
word_count: 245
---

# 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.

Instead of a plain list of links, your mobile menu can show a designed panel with your logo, key links, contact details or an offer.

The Navigation Menu block in Nexter Blocks Pro shows any pattern inside its off canvas mobile menu.

*For every Navigation Menu setting in one place, see the [Navigation Menu block guide](https://nexterwp.com/docs/add-a-navigation-menu-in-wordpress/).*

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

## Before You Start

- **Edition:** **Pro** — The off canvas pattern menu needs Nexter Blocks Pro.- **Block to enable:** Navigation Menu, switched on under **Nexter > Blocks** in your WordPress dashboard.- **A pattern:** build the panel under **Nexter > Patterns**.

## Steps

- Go to **Nexter > Patterns**, create a pattern with your menu content and publish it.

- In the Navigation Menu block, open **Mobile Menu**, turn on **Responsive Mobile Menu** and choose **Custom**.

- Set **Menu Type** to **Off Canvas**, turn on **Show Template** and choose your pattern in **Select Pattern**.

![Show Template on with a pattern chosen in Select Pattern](https://nexterwp.com/wp-content/uploads/2026/09/navigation-menu-offcanvas.webp)

- Set **Custom Width**, **Toggle Style** and **Toggle Alignment**, then save.

## How It Behaves

- Tapping the hamburger slides in a panel with your pattern instead of the menu links.- Links inside the pattern work like any other link. Edit the pattern once and every menu using it updates.

## Limitations

- **Pro only.**- The pattern replaces the menu links in the panel. Add the links you need inside the pattern.

## Troubleshooting

### The panel shows my normal menu instead of the pattern

Turn on **Show Template** and choose a published pattern.

## Related Docs

- [Create an off canvas mobile menu](https://nexterwp.com/docs/create-an-off-canvas-mobile-menu-in-wordpress/)- [Navigation Menu block: all settings](https://nexterwp.com/docs/add-a-navigation-menu-in-wordpress/)- [Add breadcrumbs in WordPress](https://nexterwp.com/docs/add-breadcrumbs-in-wordpress/)