{"id":39370,"date":"2026-03-04T17:43:31","date_gmt":"2026-03-04T22:43:31","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/?page_id=39370"},"modified":"2026-03-05T12:28:14","modified_gmt":"2026-03-05T17:28:14","slug":"mega-menu","status":"publish","type":"page","link":"https:\/\/university-communications.ncsu.edu\/documentation\/mega-menu\/","title":{"rendered":"Mega Menu"},"content":{"rendered":"\n\n\n\n<div class=\"wp-block-ncst-table-of-contents\"><p class=\"eyebrow\">On This Page<\/p><ul><li><a href=\"#overview\">Overview<\/a><\/li><li><a href=\"#getting-started\">Getting Started<\/a><\/li><li><a href=\"#creating\">Creating a New Mega Menu<\/a><\/li><li><a href=\"#using\">Using a Mega Menu<\/a><\/li><\/ul><\/div>\n\n\n\n\n<p><em><strong>Note:<\/strong> Mega Menu is currently in beta but is now available on all sites running the Premium Add-on.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"overview\">Overview<\/h2>\n\n\n\n<p>A mega menu is an expanded navigation panel that displays multiple categories and links in a single, organized dropdown. Unlike a standard menu, it reveals a broad overview of a website\u2019s structure at once. It employs columns, headings, and grouped links, to help users quickly scan options and navigate your site with efficiency<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-example.png\" data-fullsize=\"1500x844\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-example-1024x576.png\" alt=\"A screenshot example of an expanded mega menu\" class=\"wp-image-39457\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-example-1024x576.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-example-300x169.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-example-768x432.png 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-example.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">An expanded mega menu featuring first, second, third and fourth level menu items.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"getting-started\">Getting Started<\/h2>\n\n\n\n<p>Before building and then employing a mega menu on a site, there are some considerations one must take. A mega menu is a powerful tool that can improve a site&#8217;s navigability and provide clarity concerning a site&#8217;s structure; but, there is some nuance when setting up a mega menu for the first time. We will explore these nuances in the sections that follow.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comparing a Default Menu and a Mega Menu<\/h3>\n\n\n\n<p>Most sites running the NC State Theme leverage the default WordPress menu. This menu provides a simple navigation bar that displays links arranged horizontally. It also features a dropdown functionality, which allows users to organize related pages under parent items vertically<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/default-menu-gif.gif\"><img decoding=\"async\" src=\"http:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/default-menu-gif.gif\" alt=\"A GIF screen recording of the default menu dropdowns\" class=\"wp-image-39386\"\/><\/a><figcaption class=\"wp-element-caption\">An example of the default menu dropdown functionality.<\/figcaption><\/figure>\n\n\n\n<p>A mega menu is a larger than a standard menu and features a multi-column dropdown navigation panel. These columns will typically represent several categories and links at the same time. Rather than showing a simple list of subpages, it provides a comprehensive snapshot of a site\u2019s structure in one expanded view.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-screen-recording.gif\" data-fullsize=\"1520x890\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1520\" height=\"890\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-screen-recording.gif\" alt=\"GIF recording detailing the mega menu expanding\" class=\"wp-image-39459\"\/><\/a><figcaption class=\"wp-element-caption\">An example of a robust mega menu arrangement.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Premium Add-on Requirement<\/h3>\n\n\n\n<p>The mega menu feature is only available on sites running the Premium Add-on. The Premium Add-on not only includes mega menu functionality, but also several other features listed below.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/products-and-tools\/nc-state-stories\/enhanced-news-add-on\/\" data-type=\"link\" data-id=\"https:\/\/university-communications.ncsu.edu\/documentation\/products-and-tools\/nc-state-stories\/enhanced-news-add-on\/\">Immersive News posts template<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/products-and-tools\/nc-state-web-platform\/site-settings\/header-options-theme\/\" data-type=\"link\" data-id=\"https:\/\/university-communications.ncsu.edu\/documentation\/products-and-tools\/nc-state-web-platform\/site-settings\/header-options-theme\/\">Alternative mastheads and footers<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/products-and-tools\/nc-state-stories\/enhanced-news-add-on\/magazine\/\" data-type=\"link\" data-id=\"https:\/\/university-communications.ncsu.edu\/documentation\/products-and-tools\/nc-state-stories\/enhanced-news-add-on\/magazine\/\">Digital magazines<\/a><\/li>\n<\/ul>\n\n\n\n<p>Units interested in having the Premium Add-on installed on their site can reach out to our team for pricing information.<\/p>\n\n\n<div class=\"is-text wp-block-ncst-buttons\">\n    \n<div class=\"wp-block-ncst-button\">\n      <a\n        class=\"ncst-block__button-link btn\"\n        href=\"https:\/\/university-communications.ncsu.edu\/documentation\/products-and-tools\/nc-state-web-platform\/free-premium-tiers\/\"\n        data-ncst-lightbox=\"false\"\n                      >\n                  <span class=\"text\">See a complete feature list<\/span><span class=\"arrow-indicator\"><svg class=\"wolficon wolficon-arrow-right-bold\" role=\"img\"  aria-hidden=\"true\">\n\t\t\t\n\t\t\t<use xlink:href=\"#wolficon-arrow-right-bold\">\n\t\t<\/svg><\/span>\n              <\/a>\n    <\/div>\n  \n\n<div class=\"wp-block-ncst-button\">\n      <a\n        class=\"ncst-block__button-link btn\"\n        href=\"https:\/\/university-communications.ncsu.edu\/documentation\/get-support\/#help-request\"\n        data-ncst-lightbox=\"false\"\n                      >\n                  <span class=\"text\">Reach out for pricing information<\/span><span class=\"arrow-indicator\"><svg class=\"wolficon wolficon-arrow-right-bold\" role=\"img\"  aria-hidden=\"true\">\n\t\t\t\n\t\t\t<use xlink:href=\"#wolficon-arrow-right-bold\">\n\t\t<\/svg><\/span>\n              <\/a>\n    <\/div>\n  \n\n  <\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Activate the Mega Menus Custom Post Type<\/h3>\n\n\n\n<p>Before building a mega menu, one must first activate the functionality through the NC State Settings. This is because unlike a default WordPress menu, the mega menu is actually a <a href=\"https:\/\/learn.wordpress.org\/lesson\/custom-post-types\/\" data-type=\"link\" data-id=\"https:\/\/learn.wordpress.org\/lesson\/custom-post-types\/\">custom post type <\/a>(CPT). From the WordPress dashboard, one can find these settings under the Premium Add-on section of the NC State Settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/activate-cpt.gif\"><img decoding=\"async\" src=\"http:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/activate-cpt.gif\" alt=\"A GIF demoing the process of activating the Mega Menu custom post type\" class=\"wp-image-39389\"\/><\/a><figcaption class=\"wp-element-caption\">From the Premium Add-on settings, simply toggle on the Mega Menu CPT and click update.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"creating\">Creating a New Mega Menu<\/h2>\n\n\n\n<p>Following the activation, a &#8220;Mega Menus&#8221; item should appear in the far left menu of the WordPress dashboard. This is where one will go to create and edit mega menus for their site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-cpt.png\" data-fullsize=\"1500x845\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"577\" src=\"http:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-cpt-1024x577.png\" alt=\"Screenshot of an arrow pointing to the Mega Menu custom post type in the left hand menu of the WordPress dashboard\" class=\"wp-image-39404\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-cpt-1024x577.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-cpt-300x169.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-cpt-768x433.png 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-cpt.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">The Mega Menus CPT is found in the left hand rail of the dashboard<\/figcaption><\/figure>\n\n\n\n<p>To start building a mega menu, click either of the &#8220;Add New Mega Menu&#8221; buttons. This will then transport you to the mega menu editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/add-new-mega-menu.png\" data-fullsize=\"1500x845\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"577\" src=\"http:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/add-new-mega-menu-1024x577.png\" alt=\"Screenshot of Add a Mega Menu buttons\" class=\"wp-image-39407\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/add-new-mega-menu-1024x577.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/add-new-mega-menu-300x169.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/add-new-mega-menu-768x433.png 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/add-new-mega-menu.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">You can add a new mega menu through the left hand menu, or at the top of the mega menus page<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Building a Menu<\/h3>\n\n\n\n<p>Following the addition of the new, empty mega menu we can start building our navigation into a usable resource. The first thing to do is populate the title field and provide a top and bottom link for our menu&#8217;s promo area (more on this later). At this juncture, one should save the menu as a draft or publish the menu. Publishing in this area will not make the menu live on the front-end of your site; an additional step is needed for the mega menu to replace your standard navigation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-title.png\" data-fullsize=\"1500x844\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-title-1024x576.png\" alt=\"Screenshot of arrows pointing to the title field and promo links\" class=\"wp-image-39432\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-title-1024x576.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-title-300x169.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-title-768x432.png 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-title.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Start by giving the new mega menu a title and a top and bottom button. The title does not appear anywhere in the menu but will help with keeping track of future menus that are built.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Adding Items to a Menu<\/h3>\n\n\n\n<p>Now we can begin populating the items that will comprise our mega menu. It is helpful to have an idea of what the top level items will be before we start adding items. To add the first item, click the &#8220;Add Top Level Item&#8221; button.<\/p>\n\n\n\n<p>A best practice is to add each top level item before populating second, third or even fourth level items. This provides a better idea of the menu&#8217;s structure before populating subsequent levels.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/add-top-level-item.gif\"><img decoding=\"async\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/add-top-level-item.gif\" alt=\"GIF demoing clicking the Add a Menu Item button and populating the subsequent fields\" class=\"wp-image-39434\"\/><\/a><figcaption class=\"wp-element-caption\">The layout version and nav link labels are required fields when adding a top level item. Other fields are optional and up to the content maintainer whether they are included.<\/figcaption><\/figure>\n\n\n\n<p>The first level is also where one decides whether or not to feature a promotional area in the mega menu. The promotional item can feature on the left or right side of the menu and supports all the brand compliant background colors. Supported promotional content includes one of the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Email Signup<\/li>\n\n\n\n<li>Event<\/li>\n\n\n\n<li>Fact Icon<\/li>\n\n\n\n<li>Image<\/li>\n\n\n\n<li>Quote<\/li>\n\n\n\n<li>Spotlight Card<\/li>\n\n\n\n<li>Text Links<\/li>\n<\/ul>\n\n\n\n<p>Once our top level items are established, we can add our subsequent menu items. The approach to adding second, third and fourth level items is the same as the first. The major difference, is that first and second level items do not require a link. Whereas third and forth level items do.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-levels.png\" data-fullsize=\"1500x844\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-levels-1024x576.png\" alt=\"Screenshot of the various menu levels that comprise a mega menu\" class=\"wp-image-39455\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-levels-1024x576.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-levels-300x169.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-levels-768x432.png 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/mega-menu-levels.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">A breakdown of where each menu level lives in a mega menu<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"using\">Using a Mega Menu<\/h2>\n\n\n\n<p>Now that the mega menu is ready, it must be set as the site navigation. To accomplish this, one must toggle on the &#8220;Use Mega Menu Navigation&#8221; that is found under the Premium Add-on settings we visited earlier. Once we toggle this setting on, we can specify which mega menu we want to use under the &#8220;Mega Menu to Display&#8221; dropdown.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2026\/03\/use-mega-menu-nav.gif\" alt=\"GIF demoing enabling the mega menu on a site\" class=\"wp-image-39463\"\/><figcaption class=\"wp-element-caption\">The final step of the mega menu process is opting to use it as the site navigation and specifying which menu to display. Don&#8217;t forget to click update!<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Need help?<\/h2>\n\n\n\n<p>Have questions? Feel free to reach out with any questions or concerns at\u00a0<a href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\">go.ncsu.edu\/ucomm-dev-request<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Note: Mega Menu is currently in beta but is now available on all sites running the Premium Add-on. Overview A mega menu is an expanded navigation panel that displays multiple categories and links in a single, organized dropdown. Unlike a standard menu, it reveals a broad overview of a website\u2019s structure at once. It employs&hellip;<\/p>\n","protected":false},"author":82,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"ncst_custom_author":"","ncst_show_custom_author":false,"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"Expanded dropdown navigation that provides an organized overview of a website's content\"}","ncst_content_audit_freq":"","ncst_content_audit_date":"","ncst_content_audit_display":false,"ncst_backToTopFlag":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-39370","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/39370","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/users\/82"}],"replies":[{"embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/comments?post=39370"}],"version-history":[{"count":40,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/39370\/revisions"}],"predecessor-version":[{"id":39519,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/39370\/revisions\/39519"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=39370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}