{"id":15158,"date":"2026-01-13T14:09:47","date_gmt":"2026-01-13T19:09:47","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=15158"},"modified":"2026-01-21T09:27:38","modified_gmt":"2026-01-21T14:27:38","slug":"top-navigation","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/userguide\/navigation\/top-navigation\/","title":{"rendered":"Top Navigation"},"content":{"rendered":"<p>The primary navigation is the main menu that appears across the top of your website. It helps visitors understand the main sections of your site and provides consistent access to important pages.<\/p>\n<p><span class=\"imgBorderMed\"><a href=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/teacch-top-nav-example.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15208\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/teacch-top-nav-example.png\" alt=\"Screenshot of a page on the TEACCH website, highlighting their top nav. Links to larger version of same image.\" width=\"500\" height=\"400\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/teacch-top-nav-example.png 1348w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/teacch-top-nav-example-300x240.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/teacch-top-nav-example-1024x819.png 1024w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/teacch-top-nav-example-768x614.png 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/teacch-top-nav-example-600x480.png 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/teacch-top-nav-example-560x448.png 560w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/span><\/p>\n<p>The top navigation does not update automatically when pages are added or removed \u2014 <strong>changes must be made manually<\/strong>.<\/p>\n<p>Only editors assigned the <strong>Administrator<\/strong> role can manage the top navigation. If you don\u2019t have this role, contact your site administrator for assistance.<\/p>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Avoid Overcrowding the Menu<\/h2>\n<p>Your site\u2019s top navigation should be simple, scannable, and focused on helping visitors quickly identify the major areas of your website (About Us, Our Faculty, Education, etc.). Too many menu items make navigation harder to use.<\/p>\n<p>Effective site structure relies on grouping related content logically. The top navigation should provide a high-level overview of the primary sections of the site, while the left-hand navigation is used to display supporting and secondary content within each section.<\/p>\n<ul>\n<li>Limit links in the primary navigation to section landing pages.<\/li>\n<li>Avoid listing every page in the top navigation. Related content should appear in the left-hand navigation instead.<\/li>\n<li>The top navigation should <strong>never wrap to a second line<\/strong> when viewed on a large desktop monitor. If it does, your menu contains too many items.<\/li>\n<li>Use short, clear titles for the section landing pages that appear in the top navigation.<\/li>\n<\/ul>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>How to Edit the Primary Navigation<\/h2>\n<p>From the Dashboard, go to <strong>Appearance \u2192 Menus<\/strong>. You must be assigned the <strong>Administrator<\/strong> role to see this.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15212\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/menus.png\" alt=\"Screenshot of the WordPress dashboard showing where to find the Menus option under Appearance. \" width=\"250\" height=\"225\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/menus.png 326w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/menus-300x271.png 300w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/p>\n<p>At the top of the screen, select <strong>Primary Navigation<\/strong> from the menu dropdown, then click <strong>Select<\/strong>.\u00a0Sites can have more than one menu, but the one assigned as <em><strong>Primary Navigation<\/strong><\/em> controls what appears at the top of the site.<\/p>\n<p><span class=\"imgBorderMed\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-15194 size-full aligncenter\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/primary-navigation-menu.png\" alt=\"Screenshot of the menu selection option with Primary Navigation selected.\" width=\"535\" height=\"69\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/primary-navigation-menu.png 535w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/primary-navigation-menu-300x39.png 300w\" sizes=\"auto, (max-width: 535px) 100vw, 535px\" \/><\/span><\/p>\n<p>The Menus screen is divided into two areas:<\/p>\n<ul>\n<li><strong>The right side &#8220;Menu structure&#8221;<\/strong> displays the site\u2019s existing top navigation menu.\n<ul>\n<li>The order in which the items are listed is the order in which they appear in the navigation.<\/li>\n<li>Drag and drop items to reorder them but do not indent items \u2014 keep them flush left.<\/li>\n<\/ul>\n<\/li>\n<li><strong>The Left side &#8220;Add menu items&#8221;<\/strong> displays the types of items that can be added to the menu.\n<ul>\n<li>Note: most of these options, such as individual events, event venues and organizers, will not be used in the primary navigation.<\/li>\n<li>The two things typically added to the top navigation are <strong>pages<\/strong> and <strong>custom links<\/strong> (external links).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span class=\"imgBorderMed\"><a href=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/menus-screen.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15195\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/menus-screen.png\" alt=\"The menus screen displays a sites existing navigation on the right and the items you can add to the menu on the left, links to a larger version of the image.\" width=\"550\" height=\"504\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/menus-screen.png 924w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/menus-screen-300x275.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/menus-screen-768x703.png 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/menus-screen-600x549.png 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/menus-screen-560x513.png 560w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/span><\/p>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Add Items to the Top Navigation<\/h2>\n<p>Most menu items link to <strong>Pages<\/strong>, with the occasional <strong>Custom Link<\/strong> (external link).<\/p>\n<h3>Add a Page to the Top Navigation<\/h3>\n<p><strong>Pages<\/strong> are the most common items added to the top navigation.<\/p>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<ol>\n<li>In the Pages panel on the left, check the box next to the page you want to add.\n<ul>\n<li>You can use the <strong>Most Recent<\/strong>, <strong>View All<\/strong>, or <strong>Search<\/strong> tabs to find it.<\/li>\n<\/ul>\n<\/li>\n<li>Click <strong>Add to Menu<\/strong>.<\/li>\n<li>The new page will appear at the bottom of the menu on the right.<\/li>\n<li>Drag and drop the new menu item to the desired position in the list.\n<ul>\n<li>Keep items left-aligned (no indentation).<\/li>\n<\/ul>\n<\/li>\n<li>Click <strong>Save Menu<\/strong> to apply your changes.<\/li>\n<li>From the front end of your site, refresh the browser window to confirm the new link appears in the top navigation.<\/li>\n<\/ol>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<p><span class=\"imgBorderMed\"><a href=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/add-page-to-menu.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15198\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/add-page-to-menu.png\" alt=\"Screenshot of the Pages panel, links to a larger version of the image.\" width=\"200\" height=\"443\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/add-page-to-menu.png 299w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/add-page-to-menu-135x300.png 135w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/span><\/p>\n<\/div>\n<\/div>\n<h3>Add a Custom Link to the Top Navigation<\/h3>\n<p>Use a <strong>custom link<\/strong> when you need to include a link to an external resource.<\/p>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<ol>\n<li>Expand <strong>Custom Links<\/strong> in the left-hand &#8220;<strong>Add menu items<\/strong>&#8221; panel.<\/li>\n<li>In the <strong>URL<\/strong> field, enter the full web address (e.g., https:\/\/example.com).<\/li>\n<li>In the <strong>Link Text<\/strong> field, enter the text that should appear in the navigation.<\/li>\n<li>Click <strong>Add to Menu<\/strong>.<\/li>\n<li>The custom link will appear at the bottom of the menu on the right.<\/li>\n<li>Drag and drop it to the desired position in the list.\n<ul>\n<li>Keep items left-aligned (no indentation).<\/li>\n<\/ul>\n<\/li>\n<li>Click <strong>Save Menu<\/strong> to apply your changes.<\/li>\n<li>From the front end of your site, refresh the browser window to confirm the new link appears in the top navigation.<\/li>\n<\/ol>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<p><span class=\"imgBorderMed\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-15199 aligncenter\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/add-custom-link-to-menu.png\" alt=\"Screenshot of the Custom Links panel, links to larger version of the image.\" width=\"294\" height=\"219\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/add-custom-link-to-menu.png 294w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/add-custom-link-to-menu-280x210.png 280w\" sizes=\"auto, (max-width: 294px) 100vw, 294px\" \/><\/span><\/p>\n<\/div>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Reordering Items<\/h2>\n<p>The sequence in which menu items are listed is the order in which they will display in the navigation. Drag and drop menu items to change their order. Keep the menu items left-aligned (no indentation).<\/p>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Remove a Menu Item<\/h2>\n<ol>\n<li>In the &#8220;<strong>Menu structure<\/strong>&#8221; panel on the right, click the down arrow next to the item you want to remove.<\/li>\n<li>Click <strong>Remove<\/strong>.<\/li>\n<li>Click <strong>Save Menu<\/strong> to apply the change.<\/li>\n<\/ol>\n<p><span class=\"imgBorderMed\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15196\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/delete-menu-item.png\" alt=\"Screenshot of the &quot;Menu structure&quot; panel highlighting where the Remove link can be found.\" width=\"449\" height=\"660\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/delete-menu-item.png 449w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/01\/delete-menu-item-204x300.png 204w\" sizes=\"auto, (max-width: 449px) 100vw, 449px\" \/><\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The primary navigation is the main menu that appears across the top of your website. It helps visitors understand the main sections of your site and provides consistent access to important pages. The top navigation does not update automatically when pages are added or removed \u2014 changes must be made manually. Only editors assigned the &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/navigation\/top-navigation\/\" aria-label=\"Read more about Top Navigation\">Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":2239,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-15158","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/15158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/3206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=15158"}],"version-history":[{"count":8,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/15158\/revisions"}],"predecessor-version":[{"id":15215,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/15158\/revisions\/15215"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/2239"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=15158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}