Better Responsive Navigation for new WordPress Block Themes

When you build WordPress websites on top of modern block themes, things feel fast and flexible yet there are still a few spots where you wish you had a little more control. One of those is definitely navigation.

Block-based menus in Gutenberg are great for standard layouts, but when you need complex multi-layered navigation that behaves responsively and looks smooth, things can get tricky fast.

I ran into exactly this situation while developing catilservizi.com, a client website focused on high performance, clean UI, and accessibility.

The client’s requirement was straightforward on paper:

The site must score above 90 in performance, SEO must stay intact, and accessibility should not be compromised.

So I went with WordPress’s latest block theme approach for its performance and design flexibility. Everything worked beautifully except the navigation.

The Observation

Block theme navigation doesn’t handle deeply nested submenus gracefully. Once you start adding more than two layers, things start breaking the UX flow, and responsive behavior becomes unpredictable. I wanted something dynamic, lightweight, and fully customizable without using bulky third-party navigation plugins that would slow things down.

The Need

The client’s navigation design involved multiple nested layers that had to remain clear, responsive, and minimal on the DOM side. I wanted a solution that:

• Kept the markup clean
• Worked smoothly with block themes and Gutenberg
• Didn’t rely on heavy frameworks
• Was easy to manage and reuse

That’s when I decided to build OCM (Off-Canvas Multi-Level Menu): a small jQuery plugin to handle multi-level, off-canvas navigation in an elegant and modular way.

The Solution

OCM works on a simple principle: Extract, restructure, and rebuild a shadow navigation structure right before the closing </body> tag.

Installation is simple — include jQuery, the OCM script, and stylesheet in your theme’s functions.php or enqueue script section.

Here’s the exact initialization code from the plugin’s documentation:

  jQuery(document).ready(function($) {
    $('.main-menu').offCanvasMenu({
      side: 'left',
      width: '75%',
      breakpoint: '992px',
      bgColor: '#333',
      textColor: '#fff'
    });
  });

The result is a fully responsive, accessible, and elegant menu system that works perfectly inside a modern WordPress block theme. It supports unlimited submenu levels, ARIA roles, ESC-to-close, focus trapping, and an optional overlay, all while keeping the site’s performance score intact.

The Experience

This project reminded me that even with all the advancements in WordPress, there’s still space for small, efficient custom tools. The OCM plugin bridges that gap between performance, flexibility, and modern WordPress development.

After using it across several projects, I’m now working on a WordPress plugin version of OCM installable and manageable right from the dashboard. It will include visual settings, full block theme support, and the same lightweight OCM logic packaged the WordPress way.