WordPress Mega Menus with Ollie Block Builder 🔗 **Source:** [WordPress Mega Menus with Ollie Block Builder](https://www.youtube.com/watch?v=7NYskePLDM0) > [!note]+ Document Notes > tags: [WordPress, Block Themes, Navigation] > author: an unnamed author > source: [YouTube] > reference: [https://www.youtube.com/watch?v=7NYskePLDM0] > date created: {{date:YYYY-MM-DD}} {{time:HH:mm}} > > # 🏷️ Title: WordPress Mega Menus with Ollie Block Builder > <!-- deep-read:sections start --> ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - YouTube: WordPress Mega Menus with Ollie Block Builder (video link may be region-restricted). https://www.youtube.com/watch?v=7NYskePLDM0 - Plugin: Menu Designer by Ollie (free on WordPress.org). https://wordpress.org/plugins/menu-designer-by-ollie/ - Theme docs: Introducing Menu Designer (Ollie Pro overview and features). https://olliewp.com/docs/introducing-menu-designer/ - WordPress Navigation Block (official docs). https://wordpress.org/documentation/article/navigation-block/ - Gutenberg 18.3: Mega menu support in Navigation block (dev note). https://developer.wordpress.org/news/2024/06/26/18-3-mega-menu-navigation/ ## 📝 Summary - The video shows building mega and mobile menus using Menu Designer by Ollie. - The plugin adds a block-based dropdown content area for navigation items. It also lets you define custom mobile menus. [Plugin page](https://wordpress.org/plugins/menu-designer-by-ollie/) - It works with block themes, including the free Ollie theme. Paid Ollie Pro adds extra patterns. [Ollie docs](https://olliewp.com/docs/introducing-menu-designer/) - WordPress core supports Navigation block menus and evolving mega menu UX. Compatibility follows block standards. [Nav Block docs](https://wordpress.org/documentation/article/navigation-block/), [Dev note](https://developer.wordpress.org/news/2024/06/26/18-3-mega-menu-navigation/) - Bottom line: You can ship rich, accessible menus using blocks, patterns, and a focused plugin. ## 📖 Main Content - Core idea: Treat menus as block areas. Add layout, media, and CTAs inside dropdowns. - Menu Designer provides a “Dropdown” content area per menu item using blocks. This enables “mega” layouts. [Plugin page](https://wordpress.org/plugins/menu-designer-by-ollie/) - You can also create and assign a dedicated mobile menu layout from patterns. The plugin switches it at mobile breakpoints. [Plugin page](https://wordpress.org/plugins/menu-designer-by-ollie/) - Ollie Pro includes additional patterns and presets, but the free path works. [Ollie docs](https://olliewp.com/docs/introducing-menu-designer/) - WordPress Navigation block remains the foundation. You still manage structure via core blocks and patterns. [Nav Block docs](https://wordpress.org/documentation/article/navigation-block/) - Uncertainties: Theme CSS can affect dropdown styling. Performance depends on media inside menus. Accessibility requires careful focus and keyboard testing. ### 🗒️ Notes #### ⏱️ [00:03](https://www.youtube.com/watch?v=7NYskePLDM0&t=3) What the plugin adds - Adds dropdown content areas for mega menus. - Lets you override mobile navigation with a custom layout. [Plugin](https://wordpress.org/plugins/menu-designer-by-ollie/) #### ⏱️ [00:55](https://www.youtube.com/watch?v=7NYskePLDM0&t=55) Example setup - Uses free Ollie theme and free plugin. - Pro adds more patterns, not required. [Ollie docs](https://olliewp.com/docs/introducing-menu-designer/) #### ⏱️ [01:41](https://www.youtube.com/watch?v=7NYskePLDM0&t=101) Edit mobile menu - Open Site Editor, select header Navigation block. - Choose a mobile menu to display at small widths. [Nav Block docs](https://wordpress.org/documentation/article/navigation-block/) #### ⏱️ [02:36](https://www.youtube.com/watch?v=7NYskePLDM0&t=156) Build from patterns - Start a blank canvas for the mobile menu. - Insert a predefined menu pattern; customize links and logo. #### ⏱️ [03:28](https://www.youtube.com/watch?v=7NYskePLDM0&t=208) Preview and swap - Save and preview different mobile menus. - Use seasonal variants for promotions. #### ⏱️ [04:16](https://www.youtube.com/watch?v=7NYskePLDM0&t=256) Create a mega menu - Add the Dropdown menu block and label it. - Create a new dropdown layout canvas. #### ⏱️ [05:10](https://www.youtube.com/watch?v=7NYskePLDM0&t=310) Design the dropdown - Choose a wide, content-rich layout. - Include CTAs, images, and grouped links. #### ⏱️ [05:56](https://www.youtube.com/watch?v=7NYskePLDM0&t=356) Wrap-up - Plugin is free in the repo; works with block themes. - Pro adds more patterns; optional. [Plugin](https://wordpress.org/plugins/menu-designer-by-ollie/) | [Ollie docs](https://olliewp.com/docs/introducing-menu-designer/) ## 📚 References - [Menu Designer by Ollie – WordPress.org](https://wordpress.org/plugins/menu-designer-by-ollie/) - [Introducing Menu Designer – Ollie](https://olliewp.com/docs/introducing-menu-designer/) - [Navigation Block – WordPress.org Docs](https://wordpress.org/documentation/article/navigation-block/) - [Gutenberg 18.3: Mega menu support – Dev note](https://developer.wordpress.org/news/2024/06/26/18-3-mega-menu-navigation/) - [Video: WordPress Mega Menus with Ollie Block Builder](https://www.youtube.com/watch?v=7NYskePLDM0) ## 🗣️ Paraphrase - The plugin adds block-based dropdowns, enabling rich mega menus without custom code. - You can design separate mobile menus with patterns and swap them quickly when needed. ## 📰 Newsletter - Mega menus got easier with Menu Designer by Ollie. It adds block-powered dropdowns and custom mobile menus. Try it with the free Ollie theme or your favorite block theme. Start here: [Plugin](https://wordpress.org/plugins/menu-designer-by-ollie/) • [Ollie docs](https://olliewp.com/docs/introducing-menu-designer/) • [Navigation block](https://wordpress.org/documentation/article/navigation-block/) - Pro tip: Build seasonal menu variants for sales, then preview and switch with one click. - Accessibility matters: test keyboard navigation, focus order, and ARIA on complex dropdowns. ## ✅ Action Items - DevRel - Produce a 5-minute demo showcasing mobile and mega menus. - Host office hours for block-theme menu migration. - Developer advocacy: plans, talks, demos, and measurable outcomes. - Publish a “menu patterns” gist and track GitHub stars. - Education: workshops, curricula, office hours, mentorship programs. - Add a “Navigation UX in Blocks” module with hands-on labs. - Developer experience: docs, SDKs, examples, templates, quickstarts. - Ship a starter repo with three dropdown layouts and test scripts. - Developer marketing: campaigns, content, funnels, and attribution. - Run a “Seven days to better nav” email course; measure CTR uplift. - Community management: moderation, code of conduct ops, surveys. - Open a #menus channel for theme authors to swap patterns. - Internal/external/cross-project: align goals, SLAs, and feedback loops. - Create a menu performance checklist shared across teams. - OSPO - Policy & Governance: contribution policies, decision rights, charters. - Define menu accessibility standards in contribution guides. - License Compliance: policies, scanning, review, and training cadence. - Verify plugin licensing in redistributed bundles. - Security Management: vuln intake, embargo policy, signing, attestations. - Document disclosure steps for nav-related XSS vectors. - Software Inventory: SBOM strategy, ownership, freshness SLOs. - Include menu patterns in SBOM notes for theme releases. - Developer Support: training, tooling, legal guardrails, consultation hours. - Offer office hours on a11y compliance for menus. - Community Engagement: upstream funding, MoUs, operator agreements. - Support menu a11y testing tools in core and community. - Strategic Alignment: KPIs, OKRs, executive reporting, initiative roadmaps. - Track nav engagement, bounce rate, and search fallback. - Community - Maintainers: roadmap clinics, governance templates, release hygiene. - Align on mega menu markup and class naming. - Contributors: onboarding paths, “first issue” rotations, pairing sessions. - Label “menu-patterns” issues for newcomers. - Sponsors: transparent budgets, milestones, deliverables, impact reports. - Fund a11y audits for community menu patterns. - Ecosystem: cross-project incident drills and coordinated disclosures. - Run a dropdown-focus trap incident simulation. - WordPress - Core: priorities, issue triage, performance budgets, release criteria. - Track Navigation block mega menu ergonomics. [Dev note](https://developer.wordpress.org/news/2024/06/26/18-3-mega-menu-navigation/) - Core Performance: profiling plans, metrics dashboards, perf bounties. - Set budgets for menu LCP/TBT impacts. - Core AI: responsible AI guardrails, evaluation sets, pilot projects. - Explore AI-assisted pattern suggestions with strict privacy. - Core Program: coordination rituals, cross-team dependencies, retrospectives. - Share menu UX learnings across theme teams. - Mobile: app backlog, telemetry review, offline UX improvements. - Ensure parity for app-rendered menus. - Playground: browser labs, reproducible bugs, education modules. - Include a menu-stress test scenario. - Community: meetup kits, WordCamp playbooks, speaker mentorship. - Offer a “Build better menus” talk kit. - Training: lesson plans, learning paths, certification pilots. - Add a11y assessments on dropdown behavior. - Marketing: campaigns, narratives, social editorial calendars. - Showcase sites using accessible mega menus. - Support: response SLAs, knowledge base gaps, escalation paths. - Document common theme CSS conflicts with dropdowns. - Design: UX audits, design tokens, research backlogs. - Define tokens for menu spacing and focus states. - Documentation: DevHub/HelpHub gaps, examples-first patterns, style guide. - Publish reference patterns with copy-paste blocks. - Photos: content drives, moderation guidelines, taxonomy hygiene. - Curate menu imagery with alt-text guidance. - TV: submission guides, caption quality, content indexing. - Encourage captioned tutorials on menus. - Polyglots: translation sprints, glossary alignment, locale coverage. - Localize menu labels and ARIA strings. - Accessibility: WCAG reviews, tooling, issues heatmap, audits cadence. - Map dropdown behaviors to WCAG 2.2 criteria. - Meta: .org roadmap, API reliability, contributor tools. - Improve pattern discovery in the Site Editor. - CLI: command coverage, UX docs, plugin scaffolds, smoke tests. - Add a scaffold for menu pattern packs. - Hosting: cross-host checklists, defaults, telemetry for reliability. - Flag themes with heavy menu scripts. - Tide: scoring transparency, false-positive review loops, plugin outreach. - Consider a11y checks for navigation patterns. - Openverse: ingestion pipelines, moderation policy, education tie-ins. - Provide menu-friendly icons and illustrations. - Themes: review throughput, lints, mentoring, test matrices. - Add dropdown a11y to theme review checks. - Plugins: review throughput, security liaisons, provenance checks. - Encourage secure markup and sanitization in menu plugins. - The WPCC - Programs: fellowship tracks, microgrants, maintainer stipends. - Fund a menu a11y pattern library. - Projects: governance clinics, documentation sprints, release teams. - Create transparent templates for pattern governance. - Funding experiments: matched grants, milestone payouts, transparent ledgers. - Pilot “menu performance bounty” reports. - FAIR - Technical independence: local metadata, provenance, and signature checks. - Sign pattern packs; verify provenance. - Policies and covenants: funding transparency, sunset clauses, anti-capture. - Publish budgets for a11y audits. - Productized governance artifacts: charters, operator agreements, scorecards. - Ship a menu a11y scorecard for sites. ## 🧪 Hypotheses - Menu Designer reduces time to ship complex menus by 50%. - Seasonal mobile menus raise CTR on promos by 10%. - Keyboard-friendly dropdowns lower bounce from nav interactions by 5%. - Image-heavy mega menus increase LCP by ≥200ms on average. ### 📊 Methodology - Run A/B tests across menu variants and track CTR, LCP, TBT. - Collect keyboard navigation success rates with moderated testing. - Log focus/blur events to detect trap or escape failures. - Survey editors on build time and perceived complexity. ### ❓ Questions - Which theme CSS conflicts appear most often with dropdowns? - How should we standardize focus rings and escape behavior? - What telemetry best predicts menu success for users? ### 🔮 Future Research - Pattern registry for vetted, accessible mega menus. - Shared CSS tokens for cross-theme dropdown consistency. - Automated audits for focus order and aria-expanded usage. ### 💡 Implications - Practice: Editors can ship rich nav without custom code. - Policy: Projects should require a11y checks on menus. - Security: Sanitize menu content; avoid unsafe HTML. - Education: Train contributors on keyboard testing. - Funding: Sponsor audits and community pattern packs via The WPCC. ### 🧠 Learning Styles Assessment - Reading level estimate: Flesch–Kincaid Grade ≈ 9–10 (approximate). - Visual learners - Present: On-screen patterns and menu previews. - Improve: Add architecture and focus-flow diagrams. - Aural learners - Present: Narrated walkthrough on YouTube. - Improve: Provide a 3-minute audio summary. - Verbal learners - Present: Clear labels and feature names. - Improve: Add term comparisons and a mini-glossary. - Kinesthetic learners - Present: Hands-on Site Editor steps. - Improve: Provide a step checklist with acceptance tests. - Logical learners - Present: Pattern-based composition and options lists. - Improve: Decision trees for menu type selection. - Social learners - Present: Comment prompts and community channels. - Improve: Cohort labs during meetups and WordCamps. - Solitary learners - Present: Self-paced video. - Improve: Reflection prompts and self-check quizzes. - Naturalistic learners - Present: N/A in video. - Improve: Mention sustainability of media size choices. ### 📊 Accessibility Assessment - Screen reader semantics - Present: Uses Navigation block foundation. [Docs](https://wordpress.org/documentation/article/navigation-block/) - Improve: Ensure ARIA attributes reflect expanded state. - Keyboard navigation - Present: Core focus handling is available. - Improve: Prevent focus traps; support Escape to close. - Contrast and readability - Present: Theme-driven tokens help consistency. - Improve: Verify 4.5:1 for menu text and hover states. - Text resizing and reflow - Present: Responsive patterns in blocks. - Improve: Test at 200% zoom; avoid clipping in mega panels. - Media and captions - Present: YouTube captions exist. - Improve: Provide audio descriptions for image-heavy menus. - Forms and interactions - Present: Buttons and links are blocks. - Improve: Ensure minimum target sizes and clear states. - Standards reference - Map gaps to WCAG 2.2 AA criteria. ### 🌍 DEIB Assessment - Cultural breadth - Present: General web patterns; broad applicability. - Improve: Include multilingual menu examples. - Inclusive language - Present: Neutral terminology. - Improve: Provide plain-language summaries. - Neurodiversity support - Present: Chunked steps; consistent structure. - Improve: Pair icons with text; reduce motion. - Representation - Present: N/A for visuals. - Improve: Showcase diverse site examples respectfully. - Psychological safety - Present: Encouraging tutorial tone. - Improve: Add community guidelines in discussion spaces. ### ✅ Logical Validity - Strong reasoning - Analogical strength: “Menus as blocks” maps known block workflows to nav. - Causal claim: Patterns speed iteration; reasonable and testable. - Fallacies - None apparent; the tutorial avoids overgeneralization. - Tone of voice - Practical, encouraging, and action-oriented. ### 🛡️ DARVO Analysis - Deny: No denial tactics present. - Attack: No credibility attacks observed. - Reverse victim/offender: Not applicable to this instructional content. ## 🎯 Conclusion - Menu Designer by Ollie brings flexible mega and mobile menus to block themes. - Start with patterns, validate accessibility, and track performance. Then iterate for clarity and conversion. <!-- deep-read:sections end -->