Menu Structure and Navigation

Managing Menus

Summary

Web Managers control the Menu structure and links that guide visitors to other content on the website. 

Audience

Web Managers

Adding Links to Menus

  • 1

    Planning and Considerations

    All menus should be thoughtfully planned to chunk related information together according to the website visitor's needs. Take care to thoughtfully organize menus, create links, and name page Titles as they impact multiple areas on your website and webpages:

    • URL in the address bar of the browser
    • Breadcrumb trail on each page
    • Main Menu and Right Rail Menu
    Page titles and menu placement impact several areas of your website.
  • 2

    Instructions

    Accordion

    Which Menu Do you Need Help with?

    Tab/Accordion Items

    Location

    The Utility Menu is the uppermost menu on your website and is in line with the text that reads, "An official website of the State of North Carolina." Menu links appear next to the globe icon for the Select Language feature. The menu uses light colored text against the dark background color from your website's Color Palette. 

    Utility Menu and Main Menu from nc.gov
    The Utility Menu on nc.gov has a dark blue background with white text. In this example, the Utility Menu links are State Organizations, Directory, Jobs, etc. 

    Uses

    Suggested uses for the Utility Menu include providing a link to nc.gov or affiliated agencies, divisions, or departments.

    To add a Content Type to the Utility Menu:

    • Edit the Content Type you want to add or move.
    • Navigate to the Sidebar Panel as shown on the right.
    • Expand the Menu Settings tab.
    • Check the box to Provide a Menu Link.
    • Enter the Menu Link Title. It should match the Title you provided for the page, but can be shortened for very long page titles.
    • The Parent Link is <Main Menu> by default. Use the drop-down menu to change the Parent Link to <Utility Menu> 
    • Save the Content Type. 

    Location

    The Main Menu is located across the top of your website in line with your logo image. It sits beneath the Utility Menu and above the Main Image and Page Title. Menu links appear next to the magnifying glass icon for the Search feature. The menu uses dark colored text against a light background. When you select a Main Menu link (also called a parent), a menu of subordinate (or child) pages appears. The selected menu item is indicated by a secondary color from your website's Color Palette. 

    Main menu from the State Library of North Carolina
    Menu settings for adding a site page to the main menu

    Uses

    The Main Menu is the most essential navigation feature of your website. When you use it to categorize your website content under major topics and organize related information within these sections, it helps visitors better understand your content. 

    To add a Content Type to the Main Menu:

    • Edit the Content Type you want to add.
    • Navigate to the Sidebar Panel as shown on the right.
    • Expand the Menu Settings tab.
    • Check the box to Provide a Menu Link.
    • Enter the Menu Link Title. It should match the Title you provided for the page, but can be shortened for very long page titles.
    • The Parent Link is <Main Menu> by default.
    • Select the appropriate menu path from the dropdown. 
      Example: --Working
    • Continue nesting the page into the menu structure under the correct sections, as needed. 
      Example: ----State Employees & Departments -----Digital Accessibility
    • Menu links are ordered alphabetically by default. To rearrange the link order:
      • Enter a number in the Weight field to assign a weight. Menu links with lower numbers (i.e., lighter weights) float to the top of the list to display before links with higher numbers (i.e., heavier weights.) Weights are relative to one another.
    • Save and publish the Content Type. The page is added to:
    Cautions
    • It is best to add the Content Type to the menu when you initially create it.
    • If you add a Content Type in the menu, then later move the content within the menu structure, a URL redirect is automatically created. This redirect points traffic going to the old location to the new location, similar to a forwarding address at the post office.
    • If you delete a parent, its children in the menu structure will be promoted upwards in the menu.
    • Gaps in the menu structure can lead to visitors receiving an error message stating, "The website encountered an unexpected error. Try again later."

    Unique Navigation Feature of Site Pages

    The On this Page navigation feature is unique to Site Pages and only applies to text on the same page that is styled with Heading 2.

    See Step 3 of the Site Page Help Topic. 

    Unique Navigation Feature of Site Pages

    Site Pages have a navigation menu on the right side of the page called the right rail. The right rail menu displays the Site Page in context of its parent and any children. You create this context when you follow these steps to add pages to the Main Menu. 

    Location

    The Footer Menu is located across the very bottom of your website at the foot of each page. It sits directly above the Network Menu which you cannot edit. The Footer Menu uses light colored text against a dark background color from your website's Color Palette. 

    The menu is configured to hold from one to three columns of content. Content is placed using blocks. You may choose from existing blocks or create a Custom Block. 

    Footer menu for NCDIT website showing three columns where block content can be placed.
    The NCDIT Footer Menu uses a dark blue background and takes advantage of all three columns which are outlined above in red for demonstrative purposes. 

    Uses

    The Footer Menu usually contains:

    • Contact Block - Provides the name, address, phone number, and any other important contact information for your department. 
    • Follow Us Block - Contains the icons and links for your department's social media accounts. 

    Edit the Footer Menu

    Hand cursor selecting Block Layout from the Structure menu.
    Blocks are placed in the footer menu by column.
    Block Layout is used to place blocks of content into the Footer Menu. 
    • Navigate to Structure > Block Layout
    • The Block Layout page opens. Go to the first column of the table, named Block. Any content blocks that have already been placed appear here. Example:
      • Contact Block is already placed within the Footer first section, and displays on the left side of the Footer Menu. 
      • About NCDIT Block is already placed within the Footer second section, and displays in the second (or middle) column of the Footer Menu.
      • Follow Us Block with social media icons is already placed within the Footer third section, and displays in the third column on the far right of the Footer Menu. 

     

    Footer from the Digital Commons Training website.
    The Follow Us block that is placed into Footer third appears in the third column of the Footer Menu with social media links and icons.  
    Edit an Existing Placed Block
    • Go to the last column of the table, named Operations. 
    • Select the caret to expand the Configure menu.
    • Select Edit Block. 
    Hand cursor selects the Configure drop down menu under the Operations column to configure a block for the footer menu.
    Expand the configure menu for more options.
    • The Edit Content Block page for this particular block opens.
    • Edit all fields as desired, then Save.

    Location

    The Contact Us Block can be placed in the Footer Menu that displays at the foot of each page. You can control whether the block displays in the left, middle, or right column of the footer. 

    Information to Provide

    You should be sure to provide the: 

    • Name of your department
    • Physical Address
    • Mailing Address
    • Phone Number
    • Fax Number 
    • Relevant email addresses
    • Support or Help information

    Blocks must be placed in the Block Layout to display in the Footer Menu.

    Location

    The Follow Us Block can be placed in the Footer Menu that displays at the foot of each page. You can control whether the block displays in the left, middle, or right column of the footer. 

    Follow Us block featuring a variety of social media icons and links to the agency social media account.

    Supported Social Media Platforms

    Paste the URL to your department's social media account in the appropriate URL field and Save the block. The link and corresponding icon are added to the block. The following platforms are supported:

    • Facebook
    • X (formerly Twitter)
    • Instagram
    • Threads
    • Flickr
    • YouTube
    • Pinterest
    • LinkedIn
    • Medium
    • Feed

    Blocks must be placed in the Block Layout to display in the Footer Menu.