  {"id":19996,"date":"2023-11-29T08:37:30","date_gmt":"2023-11-29T13:37:30","guid":{"rendered":"https:\/\/carleton.ca\/webservices\/?p=19996"},"modified":"2026-03-24T13:16:31","modified_gmt":"2026-03-24T17:16:31","slug":"coming-out-on-top-the-new-top-nav-menu-in-cutheme","status":"publish","type":"post","link":"https:\/\/carleton.ca\/webservices\/2023\/coming-out-on-top-the-new-top-nav-menu-in-cutheme\/","title":{"rendered":"Coming out on top: the new top nav menu in cuTheme"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Coming out on top: the new top nav menu in cuTheme\n                    <\/h1>\n                \n                                \n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p>One exciting development we can\u2019t wait to bring to you with cuTheme is the top navigation menu.<\/p>\n\n\n\n<p>Top refers to the position of the navigation in the new template &#8211; it runs horizontally across the top of all your pages. It is a real leap for us as well as for you, but once you start looking at what most other major websites do in terms of positioning their site menus, you will quickly find that most big-hitters have already adopted this approach.<\/p>\n\n\n\n<p>Whether you read your news on the <a href=\"https:\/\/www.cbc.ca\/news\">CBC<\/a>, <a href=\"https:\/\/www.nytimes.com\/\">The New York Times<\/a>, or <a href=\"https:\/\/www.cnn.com\/\">CNN<\/a>, buy your clothes at <a href=\"https:\/\/oldnavy.gapcanada.ca\/\">Old Navy<\/a> or <a href=\"https:\/\/www.nordstrom.com\/\">Nordstrom\u2019s<\/a>, or dine at <a href=\"https:\/\/www.theoriginaldelmonicos.com\/\">Del Monico\u2019s<\/a> or <a href=\"https:\/\/www.mcdonalds.com\/ca\/en-ca.html\">MacDonald\u2019s<\/a>, you are going to find that top nav menus have become the norm. We are adopting the top nav menu for many reasons including consistency of look and feel, availability of more real estate for your content on the page, and improvement of accessibility.<\/p>\n\n\n\n<h2 id=\"the-best-thing-on-the-menu\" class=\"wp-block-heading\">The best thing on the menu<\/h2>\n\n\n\n<p>Let\u2019s take a look at the benefits in detail:<\/p>\n\n\n\n<h3 id=\"accessibility\" class=\"wp-block-heading\">Accessibility<\/h3>\n\n\n\n<p>This menu is in the same place on every site AND when you scroll down the page<\/p>\n\n\n\n<h3 id=\"usability\" class=\"wp-block-heading\">Usability<\/h3>\n\n\n\n<p>As we say, an accessible website is a usable website: those same reasons that help people with disabilities help <strong>any<\/strong>one browsing a ÐÓ°ÉÔ­´´ site<\/p>\n\n\n\n<h3 id=\"consistency\" class=\"wp-block-heading\">Consistency<\/h3>\n\n\n\n<p>Now people will enjoy the same position for the menu on all cuTheme sites, plus other major sites such as Students, Admissions, and Graduate Studies<\/p>\n\n\n\n<h3 id=\"real-estate\" class=\"wp-block-heading\">Real estate<\/h3>\n\n\n\n<p>Removing the left hand nav means we can use much more of the page \u2013 and look out some additional widening options in cuTheme<\/p>\n\n\n\n<h3 id=\"resourcing\" class=\"wp-block-heading\">Resourcing<\/h3>\n\n\n\n<p>Web developers in our team no longer have to check every template change works with top and left nav as they do with Framework at the moment. this means more time to develop the new features you request.<\/p>\n\n\n\n<h2 id=\"how-to-get-to-the-top-in-website-layout\" class=\"wp-block-heading\">How to get to the top in website layout<\/h2>\n\n\n\n<p>Start by looking at the pages on your website.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Are they organized hierarchically? The most important pages should be at the top level with subpages beneath.<\/li>\n\n\n\n<li>If your site is an academic department focused on recruitment, do you have items for prospective students and current students? Can prospective applicants get to the info they need quickly?<\/li>\n\n\n\n<li>Are important pages buried? Do they need to be moved up the hierarchy\/made top-level?<\/li>\n\n\n\n<li>View your pages from the back end: We have a tool for this you can <a href=\"https:\/\/carleton.ca\/webservices\/2023\/introducing-our-dynamic-page-listing-feature\/\">learn about and initiate here<\/a>.<\/li>\n\n\n\n<li>Talk to the people who deal with inquiries around information via other media in your department, for example, front of office colleagues. Are they constantly fielding calls or emails because people can&#8217;t find certain info on your site? Should that info be highlighted in the menu?<\/li>\n\n\n\n<li>Look at other departments and even other universities to see what they are doing well. Co-opt their ideas.<\/li>\n<\/ul>\n\n\n\n<p>We have a whole checklist of things to do in order to <a href=\"https:\/\/carleton.ca\/webservices\/2023\/menu-magic-create-a-great-user-experience\/\">create the perfect navigation menu in an earlier post<\/a>.<\/p>\n\n\n\n<h2 id=\"whos-in-the-business-of-effective-top-nav-menus-sprott\" class=\"wp-block-heading\">Who\u2019s in the business of effective top nav menus? Sprott!<\/h2>\n\n\n\n<p>Now let\u2019s dive in and see a great example of how to consolidate the menu into just a few items. The <a href=\"http:\/\/sprott.carleton.ca\" target=\"_blank\" rel=\"noopener noreferrer\">Sprott School of Business<\/a> are the epitome of menu consolidation. Sprott, of course, hosts a lot of content on their site, so they needed to be economic and efficient in how they organize their menu.<\/p>\n\n\n\n<p>Of course, they knocked it out of the park. They have four navigation items on their top nav. We featured the reorganization of their site in a news story <a href=\"https:\/\/carleton.ca\/webservices\/2023\/an-exemplar-cutheme-site-the-sprott-success\/\" target=\"_blank\" rel=\"noopener noreferrer\">An Exemplar cuTheme Site: The Sprott Success<\/a>. In that post, Liz Lariviere from Sprott explains that they as a team, &#8220;started by benchmarking about 25 different Business school websites [in Canada and the US] &#8230; We looked at their nav, web architecture, and content. We noticed that the better sites had 3-4 menu items and their content was succinct and very visual.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1444\" height=\"382\" src=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.27.05-AM.png\" alt=\"Sprott top navigation menu displaying just four items\" class=\"wp-image-20038\" srcset=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.27.05-AM.png 1444w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.27.05-AM-512x135.png 512w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.27.05-AM-1024x271.png 1024w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.27.05-AM-320x85.png 320w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.27.05-AM-768x203.png 768w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.27.05-AM-360x95.png 360w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.27.05-AM-200x53.png 200w\" sizes=\"auto, (max-width: 1444px) 100vw, 1444px\" \/><\/figure>\n\n\n\n<p>Notice that the Sprott team inserted an innovative item on the menu labelled&nbsp;<strong>I am<\/strong>. This avatar-led approach (creating the idea of a role or path that a person visiting the site is on) is another great way to channel a user to the content they need or want. Avatar roles could include &#8220;I am a&nbsp;<strong>future student<\/strong>&#8220;, &#8220;I am a <strong>student seeking an accommodation<\/strong>&#8221; &nbsp;or even, &#8220;I am a <strong>visitor to campus seeking a sandwich<\/strong>.&#8221;<\/p>\n\n\n\n<p>We are so excited to see how you take on the challenge and opportunities offered by creating a top navigation menu on your site when it comes to migrating your site(s) to the new cuTheme template!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One exciting development we can\u2019t wait to bring to you with cuTheme is the top navigation menu. Top refers to the position of the navigation in the new template &#8211; it runs horizontally across the top of all your pages. It is a real leap for us as well as for you, but once you [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[273,390],"tags":[],"class_list":["post-19996","post","type-post","status-publish","format-standard","hentry","category-cutheme-announcements","category-keep"],"acf":{"cu_post_thumbnail":"announcement"},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/19996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/comments?post=19996"}],"version-history":[{"count":1,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/19996\/revisions"}],"predecessor-version":[{"id":21435,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/19996\/revisions\/21435"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/media?parent=19996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/categories?post=19996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/tags?post=19996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}