{"id":5561,"date":"2026-06-01T09:33:05","date_gmt":"2026-06-01T13:33:05","guid":{"rendered":"https:\/\/blog.uvm.edu\/manual\/?p=5561"},"modified":"2026-06-01T10:54:27","modified_gmt":"2026-06-01T14:54:27","slug":"how-to-build-your-site-navigation-in-uvms-catamount-theme-using-blocks","status":"publish","type":"post","link":"https:\/\/blog.uvm.edu\/manual\/2026\/06\/01\/how-to-build-your-site-navigation-in-uvms-catamount-theme-using-blocks\/","title":{"rendered":"How to build your site navigation in UVM&#8217;s Catamount theme using blocks"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p>If you&#8217;re migrating from the classic UVM WordPress theme to the new block-based system, one of the biggest changes you\u2019ll notice is how navigation menus work.<\/p>\n\n\n\n<p>In this guide, you\u2019ll learn how to recreate your site navigation using WordPress blocks\u2014and why this step is required.<\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Watch the full video tutorial<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Recreate your site navigation in UVM&#039;s Catamount WordPress theme\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/vcHTt8wku0c?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div data-wp-context=\"{ &quot;autoclose&quot;: false, &quot;accordionItems&quot;: [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow\">\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-1&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n<h3 class=\"wp-block-accordion-heading\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-1-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" data-wp-on--keydown=\"actions.handleKeyDown\" id=\"accordion-item-1\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">View the transcript of this video<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h3>\n\n\n\n<div inert aria-labelledby=\"accordion-item-1\" data-wp-bind--inert=\"!state.isOpen\" id=\"accordion-item-1-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow\">\n<p>(soft music)<\/p>\n\n\n\n<p>0:08<\/p>\n\n\n\n<p>&#8211; Let&#8217;s take a moment to review site navigation<\/p>\n\n\n\n<p>0:11<\/p>\n\n\n\n<p>and what to expect when you&#8217;re migrating<\/p>\n\n\n\n<p>0:14<\/p>\n\n\n\n<p>from the old UVM WordPress theme to the new.<\/p>\n\n\n\n<p>0:18<\/p>\n\n\n\n<p>Here is an existing site using the older WordPress theme,<\/p>\n\n\n\n<p>0:23<\/p>\n\n\n\n<p>and if you remember, the menu is launched by a menu button<\/p>\n\n\n\n<p>0:28<\/p>\n\n\n\n<p>and slides out on the left and there&#8217;s dropdowns.<\/p>\n\n\n\n<p>0:34<\/p>\n\n\n\n<p>This is the classic menu, and unfortunately,<\/p>\n\n\n\n<p>0:38<\/p>\n\n\n\n<p>WordPress has changed how menus are created.<\/p>\n\n\n\n<p>0:42<\/p>\n\n\n\n<p>They are no longer using the classic menu system<\/p>\n\n\n\n<p>0:45<\/p>\n\n\n\n<p>and they&#8217;ve switched to a block-based approach.<\/p>\n\n\n\n<p>0:49<\/p>\n\n\n\n<p>This means, unfortunately,<\/p>\n\n\n\n<p>0:50<\/p>\n\n\n\n<p>that your menu will not automatically come over<\/p>\n\n\n\n<p>0:53<\/p>\n\n\n\n<p>and will need to be rebuilt.<\/p>\n\n\n\n<p>0:57<\/p>\n\n\n\n<p>I know it&#8217;s a drag, but it&#8217;s not that big a deal, really.<\/p>\n\n\n\n<p>1:01<\/p>\n\n\n\n<p>I&#8217;m gonna show you how to recreate your navigation<\/p>\n\n\n\n<p>1:03<\/p>\n\n\n\n<p>in the new WordPress, but this is really important.<\/p>\n\n\n\n<p>1:06<\/p>\n\n\n\n<p>Make sure that you start with a screen grab<\/p>\n\n\n\n<p>1:09<\/p>\n\n\n\n<p>of your existing navigation so that you have a record<\/p>\n\n\n\n<p>1:12<\/p>\n\n\n\n<p>of something to work from.<\/p>\n\n\n\n<p>1:14<\/p>\n\n\n\n<p>On Macintosh, you bring up your navigation<\/p>\n\n\n\n<p>1:17<\/p>\n\n\n\n<p>and it&#8217;s Command + Shift + 4,<\/p>\n\n\n\n<p>1:19<\/p>\n\n\n\n<p>box off that area to make a screen grab.<\/p>\n\n\n\n<p>1:22<\/p>\n\n\n\n<p>And on Windows, it&#8217;s the Print Screen button<\/p>\n\n\n\n<p>1:26<\/p>\n\n\n\n<p>on your keyboard.<\/p>\n\n\n\n<p>1:31<\/p>\n\n\n\n<p>This is how you have always done your menu in WordPress.<\/p>\n\n\n\n<p>1:37<\/p>\n\n\n\n<p>You have a list of pages on your site on the left.<\/p>\n\n\n\n<p>1:41<\/p>\n\n\n\n<p>You click on something to add to the menu.<\/p>\n\n\n\n<p>1:43<\/p>\n\n\n\n<p>You add it to the menu, it shows up at the bottom,<\/p>\n\n\n\n<p>1:46<\/p>\n\n\n\n<p>and then you drag it where you want,<\/p>\n\n\n\n<p>1:49<\/p>\n\n\n\n<p>save, and you have it.<\/p>\n\n\n\n<p>1:52<\/p>\n\n\n\n<p>Okay, that is not how this is gonna happen now.<\/p>\n\n\n\n<p>1:55<\/p>\n\n\n\n<p>Let me change back.<\/p>\n\n\n\n<p>1:56<\/p>\n\n\n\n<p>I&#8217;m gonna change back to the theme.<\/p>\n\n\n\n<p>1:59<\/p>\n\n\n\n<p>Switch to the new Catamount theme.<\/p>\n\n\n\n<p>2:02<\/p>\n\n\n\n<p>I&#8217;m gonna show you what happens.<\/p>\n\n\n\n<p>2:05<\/p>\n\n\n\n<p>View the site, click on the hamburger icon,<\/p>\n\n\n\n<p>2:08<\/p>\n\n\n\n<p>and the navigation is not there.<\/p>\n\n\n\n<p>2:14<\/p>\n\n\n\n<p>Okay, expected that. It&#8217;s unfortunate.<\/p>\n\n\n\n<p>2:19<\/p>\n\n\n\n<p>Let&#8217;s make a new menu together.<\/p>\n\n\n\n<p>2:23<\/p>\n\n\n\n<p>Okay, so go into your dashboard of your site,<\/p>\n\n\n\n<p>2:28<\/p>\n\n\n\n<p>navigate to Appearance, Editor, Patterns.<\/p>\n\n\n\n<p>2:34<\/p>\n\n\n\n<p>Pick your header.<\/p>\n\n\n\n<p>2:35<\/p>\n\n\n\n<p>The navigation is attached now to the header.<\/p>\n\n\n\n<p>2:38<\/p>\n\n\n\n<p>Click on the header.<\/p>\n\n\n\n<p>2:41<\/p>\n\n\n\n<p>And mine&#8217;s a little different.<\/p>\n\n\n\n<p>2:43<\/p>\n\n\n\n<p>I believe that you&#8217;re gonna see a white box here<\/p>\n\n\n\n<p>2:46<\/p>\n\n\n\n<p>that says your navigation&#8217;s missing,<\/p>\n\n\n\n<p>2:50<\/p>\n\n\n\n<p>and it will give you the option<\/p>\n\n\n\n<p>2:52<\/p>\n\n\n\n<p>to make a new navigation menu.<\/p>\n\n\n\n<p>2:56<\/p>\n\n\n\n<p>So, click yes. Make sure you click yes.<\/p>\n\n\n\n<p>2:59<\/p>\n\n\n\n<p>It will show up here on the right.<\/p>\n\n\n\n<p>3:00<\/p>\n\n\n\n<p>It will be called Menu by default.<\/p>\n\n\n\n<p>3:04<\/p>\n\n\n\n<p>I am going to slide this over<\/p>\n\n\n\n<p>3:08<\/p>\n\n\n\n<p>because this is the most important part<\/p>\n\n\n\n<p>3:10<\/p>\n\n\n\n<p>of this entire tutorial.<\/p>\n\n\n\n<p>3:12<\/p>\n\n\n\n<p>Make sure you have made a screen grab<\/p>\n\n\n\n<p>3:17<\/p>\n\n\n\n<p>of your old site navigation<\/p>\n\n\n\n<p>3:19<\/p>\n\n\n\n<p>so that you can work like this.<\/p>\n\n\n\n<p>3:21<\/p>\n\n\n\n<p>Old site navigation on the left, new is on the right.<\/p>\n\n\n\n<p>3:26<\/p>\n\n\n\n<p>We&#8217;re just gonna use it as a reference.<\/p>\n\n\n\n<p>3:28<\/p>\n\n\n\n<p>Click the plus button here<\/p>\n\n\n\n<p>3:31<\/p>\n\n\n\n<p>and type in the first thing on our navigation.<\/p>\n\n\n\n<p>3:35<\/p>\n\n\n\n<p>So, Vermont Climate Assessment.<\/p>\n\n\n\n<p>3:39<\/p>\n\n\n\n<p>I have a typo.<\/p>\n\n\n\n<p>3:42<\/p>\n\n\n\n<p>Annoying.<\/p>\n\n\n\n<p>3:44<\/p>\n\n\n\n<p>There. It shows up.<\/p>\n\n\n\n<p>3:46<\/p>\n\n\n\n<p>You click on it, add it.<\/p>\n\n\n\n<p>3:49<\/p>\n\n\n\n<p>I&#8217;m gonna go right to the parent,<\/p>\n\n\n\n<p>3:51<\/p>\n\n\n\n<p>Executive Summary,<\/p>\n\n\n\n<p>3:54<\/p>\n\n\n\n<p>there that is, click that page.<\/p>\n\n\n\n<p>3:56<\/p>\n\n\n\n<p>I wanna show you how to make a child<\/p>\n\n\n\n<p>3:58<\/p>\n\n\n\n<p>so that you get this parent-child relationship here.<\/p>\n\n\n\n<p>4:03<\/p>\n\n\n\n<p>So, type in the first one,<\/p>\n\n\n\n<p>4:06<\/p>\n\n\n\n<p>Climate Change in Vermont,<\/p>\n\n\n\n<p>4:09<\/p>\n\n\n\n<p>and then to make the child, you just grab it,<\/p>\n\n\n\n<p>4:15<\/p>\n\n\n\n<p>hover over the parent, and it indents it.<\/p>\n\n\n\n<p>4:19<\/p>\n\n\n\n<p>It&#8217;s really easy.<\/p>\n\n\n\n<p>4:21<\/p>\n\n\n\n<p>Now, I went ahead and created this menu already,<\/p>\n\n\n\n<p>4:23<\/p>\n\n\n\n<p>so I&#8217;m going to select that.<\/p>\n\n\n\n<p>4:26<\/p>\n\n\n\n<p>All of those pages are now reflected in the nav and save it.<\/p>\n\n\n\n<p>4:32<\/p>\n\n\n\n<p>And let&#8217;s see what that looks like.<\/p>\n\n\n\n<p>4:35<\/p>\n\n\n\n<p>View site.<\/p>\n\n\n\n<p>4:38<\/p>\n\n\n\n<p>Under the hamburger. So, there we go.<\/p>\n\n\n\n<p>4:40<\/p>\n\n\n\n<p>So, it really wasn&#8217;t so hard to do.<\/p>\n\n\n\n<p>4:44<\/p>\n\n\n\n<p>It doesn&#8217;t even take a long time.<\/p>\n\n\n\n<p>4:47<\/p>\n\n\n\n<p>And the good news is that it is a one step process<\/p>\n\n\n\n<p>4:51<\/p>\n\n\n\n<p>when moving to the new WordPress system.<\/p>\n\n\n\n<p>4:53<\/p>\n\n\n\n<p>You&#8217;re not gonna have to do this twice.<\/p>\n\n\n\n<p>4:57<\/p>\n\n\n\n<p>If you need help with it, check in to help hours,<\/p>\n\n\n\n<p>5:00<\/p>\n\n\n\n<p>and I&#8217;ll help you build your navigation.<\/p>\n\n\n\n<p>5:02<\/p>\n\n\n\n<p>(soft music)<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Overview: What changed with navigation?<\/h2>\n\n\n\n<p>In the classic WordPress experience, menus were created using the <strong>Menu tool<\/strong>. If you remember, it went like this:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add pages from a list<\/li>\n\n\n\n<li>Drag and drop to reorder<\/li>\n\n\n\n<li>Use dropdowns for hierarchy<\/li>\n<\/ul>\n\n\n\n<p>In the new block-based system:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigation is built inside the <strong>Site Editor<\/strong><\/li>\n\n\n\n<li>Menus are part of your <strong>header<\/strong><\/li>\n\n\n\n<li>You use blocks instead of the classic menu builder<\/li>\n<\/ul>\n\n\n\n<p>\u26a0\ufe0f <strong>Important:<\/strong> Your old menu will NOT migrate automatically\u2014you must rebuild it.<\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Capture your existing navigation<\/h2>\n\n\n\n<p>Before doing anything, take a screenshot of your current menu. You\u2019ll use this as your reference.<\/p>\n\n\n\n<p>Before doing anything, take a screenshot of your current menu. You\u2019ll use this as your reference.<\/p>\n\n\n\n<p><strong>Mac:<\/strong> <code>Command + Shift + 4<\/code><br \/><strong>Windows:<\/strong> <code>Print Screen<\/code><\/p>\n\n\n\n<p>[SCREEN GRAB: Old site navigation expanded (classic theme)]<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"457\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/old-wp-classic-menu-1024x457.png\" alt=\"Classic menu navigation in the 2019 WordPress theme.\" class=\"wp-image-5568\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/old-wp-classic-menu-1024x457.png 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/old-wp-classic-menu-300x134.png 300w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/old-wp-classic-menu-768x342.png 768w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/old-wp-classic-menu.png 1395w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\ud83d\udca1 Tip: Keep this screenshot open on one side of your screen while rebuilding your menu.<\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Confirm your old menu (for context)<\/h2>\n\n\n\n<p>This is what you may be used to in the classic system:<\/p>\n\n\n\n<p>[SCREEN GRAB: WordPress classic menu interface showing page list and drag\/drop menu]<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select pages on the left<\/li>\n\n\n\n<li>Add them to the menu<\/li>\n\n\n\n<li>Drag to arrange and nest items<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"770\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/od-wp-classic-menu-creation-1024x770.png\" alt=\"\" class=\"wp-image-5569\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/od-wp-classic-menu-creation-1024x770.png 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/od-wp-classic-menu-creation-300x226.png 300w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/od-wp-classic-menu-creation-768x578.png 768w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/od-wp-classic-menu-creation.png 1391w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u2705 This interface no longer applies in block themes.<\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Switch to the new theme<\/h2>\n\n\n\n<p>After activating the new Catamount theme:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Visit your site<\/li>\n\n\n\n<li>Click the hamburger menu icon<\/li>\n<\/ol>\n\n\n\n<p>[SCREEN GRAB: New site header with empty or missing navigation]<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"702\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/new-wp-theme-navigation-empty-1024x702.gif\" alt=\"\" class=\"wp-image-5570\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/new-wp-theme-navigation-empty-1024x702.gif 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/new-wp-theme-navigation-empty-300x206.gif 300w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/new-wp-theme-navigation-empty-768x526.gif 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You\u2019ll notice:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigation is missing (this is expected)<\/li>\n<\/ul>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Open the site editor<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>From your dashboard:<\/li>\n\n\n\n<li>Go to <strong>Appearance<\/strong><\/li>\n\n\n\n<li>Select <strong>Editor<\/strong><\/li>\n\n\n\n<li>Click <strong>Patterns<\/strong><\/li>\n\n\n\n<li>Choose your <strong>Header<\/strong><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><br \/>In the new WordPress, navigation is now tied to the header template and created using WordPress Blocks.<br \/><\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5: Create a new navigation menu<\/h2>\n\n\n\n<p>When you open the header:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You\u2019ll likely see a message saying your navigation is missing<\/li>\n\n\n\n<li>You\u2019ll be prompted to create a new one<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"335\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/WP_header-missing-menu-1024x335.png\" alt=\"Editing the header in WordPress. The navigation is missing.\" class=\"wp-image-5572\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/WP_header-missing-menu-1024x335.png 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/WP_header-missing-menu-300x98.png 300w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/WP_header-missing-menu-768x251.png 768w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/WP_header-missing-menu.png 1485w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click <strong>Create a new Menu<\/strong><\/li>\n\n\n\n<li>A menu (usually named \u201cMenu\u201d) appears in the right panel<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 6: Build your menu using blocks<\/h2>\n\n\n\n<p>Now you\u2019ll recreate your menu using your screenshot as a reference.<\/p>\n\n\n\n<p>[SCREEN GRAB: Split view \u2013 old navigation (left) and new editor (right)]<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Add a top-level item<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the <strong>+ (Add block)<\/strong> button<\/li>\n\n\n\n<li>Type the name of a page (e.g., <em>Vermont Climate Assessment<\/em>)<\/li>\n\n\n\n<li>Select the page from results<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"568\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/creating-new-menu-in-wp-blocks-1024x568.png\" alt=\"\" class=\"wp-image-5575\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/creating-new-menu-in-wp-blocks-1024x568.png 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/creating-new-menu-in-wp-blocks-300x166.png 300w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/creating-new-menu-in-wp-blocks-768x426.png 768w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/creating-new-menu-in-wp-blocks.png 1496w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 7: Create dropdown (parent-child) items<\/h2>\n\n\n\n<p>To nest pages:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add another page<\/li>\n\n\n\n<li>Click and drag it under the parent item<\/li>\n\n\n\n<li>Slightly hover to the right until it <strong>indents<\/strong><\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Add a child navigation element in WordPress\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/IH5OLIMQmaY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>\u2714\ufe0f  That indentation creates the dropdown relationship.<\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 8: Continue building your menu<\/h2>\n\n\n\n<p>Repeat:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add items<\/li>\n\n\n\n<li>Reorder as needed<\/li>\n\n\n\n<li>Nest child pages<\/li>\n<\/ul>\n\n\n\n<p>\ud83d\udca1 This process replaces the old drag-and-drop interface.<\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 9: Save your navigation<\/h2>\n\n\n\n<p>When done:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click <strong>Save<\/strong><\/li>\n\n\n\n<li>Confirm your changes<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 10: Preview your menu on the site<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Visit your site<\/li>\n\n\n\n<li>Click the hamburger menu<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"564\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/wp-completed-main-navigation-1024x564.png\" alt=\"\" class=\"wp-image-5577\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/wp-completed-main-navigation-1024x564.png 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/wp-completed-main-navigation-300x165.png 300w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/wp-completed-main-navigation-768x423.png 768w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/wp-completed-main-navigation-1536x846.png 1536w, https:\/\/blog.uvm.edu\/manual\/files\/2026\/06\/wp-completed-main-navigation.png 1635w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You should now see:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Your full navigation<\/li>\n\n\n\n<li>Proper dropdown hierarchy<\/li>\n<\/ul>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Final thoughts<\/h2>\n\n\n\n<p>Rebuilding your navigation may feel inconvenient, but:<\/p>\n\n\n\n<p>\u2714\ufe0f It\u2019s quick once you get started<br \/>\u2714\ufe0f It only needs to be done once<br \/>\u2714\ufe0f The new system is more flexible moving forward<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;re migrating from the classic UVM WordPress theme to the new block-based system, one of the biggest changes you\u2019ll notice is how navigation menus work. In this guide, you\u2019ll learn how to recreate your site navigation using WordPress blocks\u2014and why this step is required. Watch the full video tutorial Overview: What changed with navigation? &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/blog.uvm.edu\/manual\/2026\/06\/01\/how-to-build-your-site-navigation-in-uvms-catamount-theme-using-blocks\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;How to build your site navigation in UVM&#8217;s Catamount theme using blocks&#8221;<\/span><\/a><\/p>\n","protected":false},"author":5625,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5561","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"Susan Mason Lazarev","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"Susan Mason Lazarev","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_comment":0,"rttpg_category":"<a href=\"https:\/\/blog.uvm.edu\/manual\/category\/uncategorized\/\" rel=\"category tag\">Uncategorized<\/a>","rttpg_excerpt":"If you&#8217;re migrating from the classic UVM WordPress theme to the new block-based system, one of the biggest changes you\u2019ll notice is how navigation menus work. In this guide, you\u2019ll learn how to recreate your site navigation using WordPress blocks\u2014and why this step is required. Watch the full video tutorial Overview: What changed with navigation?&hellip;","_links":{"self":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/5561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/users\/5625"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/comments?post=5561"}],"version-history":[{"count":15,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/5561\/revisions"}],"predecessor-version":[{"id":5602,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/5561\/revisions\/5602"}],"wp:attachment":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/media?parent=5561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/categories?post=5561"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/tags?post=5561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}