How to Create a Menu with the Navigation Block - Tutorial

[courtneyr-dev]

Topic Description

Navigate your way around your website with the aid of the navigation block. This tutorial will walk a user through how to create a menu with the navigation block in the site editor of updated 6.4. The tutorial will use the 2024 theme.

• Adding pages to a current navigation
• Setting up a new navigation menu
• How to move navigation items to different locations
• How to create a second navigation menu to use in a second location such as the footer or sidebar.

Objective

• Learn the different blocks that can be used within the navigation block.
• To have the user feel more at ease when creating a website’s navigation menu.
• To increase awareness of UX/UI design principles and accessibility and how these things make navigating a website easier to use.

Related Resources

Links to related content on Learn, HelpHub, DevHub, GitHub Gutenberg Issues, DevNotes, etc.

• 5.9 https://learn.wordpress.org/workshop/how-to-create-a-menu-with-the-navigation-block/ ( goes to the Lesson plan link)
• 5.9 https://learn.wordpress.org/tutorial/how-to-create-a-menu-with-the-navigation-block/
• 5.9 https://learn.wordpress.org/lesson-plan/how-to-create-a-menu-with-the-navigation-block/
  6.2 https://wordpress.tv/2023/07/12/demystifying-the-navigation-block-how-to-set-up-your-sites-navigation-now-and-in-the-future/

Guidelines

Review the [team guidelines] (https://make.wordpress.org/training/handbook/guidelines/)

Tutorial Development Checklist

• Vetted by instructional designers for content idea
• Provide feedback of the idea
• Gather links to Support and Developer Docs
• Review any related material on Learn
• Define several SEO keywords to use in the article and where they should be prominently used
• Description and Objectives finalized
• Tutorial created and announced to the team for Q/A review
• Tutorial reviewed and ready to publish
• Tutorial submitted and published to WPTV
• Tutorial published on WPTV
• Tutorial captioned
• Tutorial created on Learn.WordPress.org
• Tutorial post reviewed for grammar, spelling, etc.
• Tutorial published on Learn.WordPress.org
• Tutorial announced to Marketing Team for promotion

SEO keywords-

• navigation block
• how to create a menu
• navigation menu items
• navigation bar
• list view
• select menu

[courtneyr-dev]

Needs to be revised: WordPress/gutenberg#37454

[azhiya]

Please review WordPress/Documentation-Issue-Tracker#297

[abhansnuk]

This is published on Learn WP, and needs some revisions for 6.0. Putting it back into the earlier column, in discussions with Hauwa and Courtney.

[courtneyr-dev]

WordPress/gutenberg#40413

[courtneyr-dev]

https://make.wordpress.org/core/2022/09/16/whats-new-in-gutenberg-14-1-15-september/

[courtneyr-dev]

https://www.youtube.com/watch?v=5ovtyIyFOoA&feature=youtu.be&ab_channel=DaveonWP&themeRefresh=1

[courtneyr-dev]

https://drive.google.com/file/d/1Xg7WGdjVD6USv73RjI7k_WOF8zQvf_iE/view

[courtneyr-dev]

Fix Navigation block fallbacks and entity saving.
Navigation: Try making it possible for themes to have the X overlay the = icon.
Navigation: Try adding minimal animation to overlay.
Add select icon for Navigation Block's menu button.
Use page list instead of placeholder as fallback.

[Piyopiyo-Kitsune]

Same here-- will you be working on these revisions @courtneyr-dev as the noted assignee or does this require reassignment?

[courtneyr-dev]

6.2 Add List-Based Editing to Navigation Block https://make.wordpress.org/core/2022/11/23/whats-new-in-gutenberg-14-6-23-november/

[courtneyr-dev]

WP 6.4 Visuals: demo of adding a button to a menu.
Adoption approach: N/A
Key Make Posts/GitHub/Trac Issue(s): Navigation block: add buttons to list of allowed blocks (53966)

@lada7042

[github-actions]

This content is ready to be reviewed. Please follow the steps listed under Guidelines for reviewing content. Thank you for your contribution! ✨

[ghost]

Tutorial ready for review.

Navigation.block.tutorial.mp4

[ghost]

FYI- I know about the watermark. With the free version I only get 1 removal a month so saving it for final publishing.

[westnz]

Thank you for updating this tutorial @lada7042
Great work! The learning outcomes/objectives are clear. The narration audio matches what is shown visually, and I could easily follow the explanations and examples. I think adding a short section about submenus and some of the sidebar settings might be helpful.

[priyanshi-vijay]

Hi @lada7042,
I watched the video, and in my opinion, it's really good! It's easy to understand and teaches a lot. The goals of what you'll learn are clear. The audio matches what you see, so it's easy to follow.

[itsgajendraSingh]

Hii @lada7042,
After carefully examining the video, I believe it is exceptionally enlightening and has been conveyed in a manner that makes it easy to grasp.

[ghost]

Thank to all the reviewers, @westnz @priyanshi-vijay @itsgajendraSingh for taking the time to review the tutorial. I am going to add about 2 min. of the recommended additions of submenu and sidebar tools. Looking to publish next week.

[ghost]

Updated. Minus the watermarks.

How.to.create.a.menu.with.navigation.block.mp4

[ghost]

Published! https://learn.wordpress.org/tutorial/how-to-create-a-menu-with-the-navigation-block-2/

[ghost]

Due to an issue. #2093 (comment) I needed to make edits to the video. Here is the updated version. #2093 (comment)