Snippet: How to add custom blocks to Navigation menus

[bph]

Discussed in https://github.com/WordPress/developer-blog-content/discussions/355

^{Originally posted by ndiego December 9, 2024} Adding custom blocks to the Navigation block is a common need, such as blocks for icons or a mega menu. By default, the Navigation block restricts the blocks that can be used within it. However, with a bit of code, you can enable your custom block to be used in Navigation. This snippet will show you how.

This idea originated from this discussion in WP Slack.

[bph]

@ndiego mentioned

In preparation for this snippet (hopefully) being approved. I have started an initial draft: https://docs.google.com/document/d/1d9_Emzx-zVQn6YFS6A7xTru500y-oqs6yqa85jjvQQI/edit?tab=t.0

[bph]

@ndiego Just finished my first review.

[bph]

@ndiego are you still available to push this over the finish line?

[bph]

I reviewed the Snippet article and tested the code.

[troychaplin]

I have completed a second review, tested the code, and made 1 change in the JS snippet as it was missing a sinlge quote

[bph]

Published: Snippet: How to add custom blocks to navigation menus

[github-actions[bot]]

Pre-publishing checklist

• [x] Post Title and subheaders in sentence case
• [x] Are Category or Categories selected?
• [x] Are Tags identifies?
• [x] Is there an explicit Excerpt?
• [x] Are all images files uploaded to the media library
• [x] Do all images have an alt-text?
• [x] For TOC us the Pattern under Developer Blog > Table of contents
• [x] Assign or upload a featured image
• [x] Props added? (See Guidelines) 🙌 Publish! 📗

Post-publishing checklist

• [x] add Props for reviews to #props channel in WP Slack (Example) (use Slack handles)
• [x] close the issue with a comment to link to the published post
• [x] close the accompanying discussion with the link to the published post.