Model website navigation

Website navigation arranges links and menus to help users efficiently browse and access information on a website.

This guide will show you the recommended practices for defining and organizing content types and their properties that your editors will use to create your navigation menus in any website channel managed in the Xperience by Kentico application.

Prerequisites

You should have basic knowledge of content modeling principles.

Start from your marketing team’s needs

A thorough examination of your existing content, its lifecycle, editing workflows, and discussions with content editors, strategists, or information architects help build the groundwork for your content model.

Let’s play out this scenario:

Analyze your team’s requirements for working with navigation

During the content audit and project shaping, your team identified the following criteria:

• The navigation will differ per website channel and will be multilingual.
• The primary navigation will have two levels, for example:
  
• Side menus can nest up to three levels.
• Some of the parent items will contain a hyperlink.
  
• Editors will need to adjust the navigation contents by themselves; creating navigation should be simple and follow the same pattern on different website channels.
• Editors will need to create different types of groups of menu items depending on the website channel. For example, microsites will have navigation without nested elements.
• Designers are expecting to introduce mega menus for some of the website channels. Find out more about mega menus in Mega Menus Work Well for Site Navigation.

Define the content types and their properties to build the navigation menu

Based on your team’s requirements, you can define the approach editors will use to create different navigation menus and their items.

You’ve defined the following properties of the Navigation item:

• Navigation
  • Caption
  • Icon
  • Item description
  • Link to page
  • Link to external website
  • Open in a new tab
  • Navigation menu type
    • Header navigation
    • Footer navigation
    • Mega menu
    • Side navigation

As designers consider building mega menus with Icons and Images, you will reuse the existing Asset content type to store mega menu visuals.

• Asset
  • Description
  • Alt text caption
  • The media file

Draft a simple navigation content type

Using the information from your team, you can create a rough sketch of the content types for creating navigation menus.

To simplify workflows for editors and developers, you’ve decided to build the whole navigation using one content type. As editors need to reorder items, they will make the navigation per website channel using a dedicated section in the content tree.

Add tips and hints for editors to your Navigation content type

Depending on your team’s experience, we recommend that you create more or less detailed instructions and document every content type field. Tips and hints help remove confusion and speed up their process. Your instructions (and the whole content type) might look like the following:

Verify Navigation content type with stakeholders

After completing the previous exercise, you and your team should know what content types they need to store information for Navigation. 

To help your team understand how editors will create the navigation in the hierarchy, you might want to create a simplified diagram like the following:

Create the content type in Xperience

To verify that the editors can easily create navigation menus of different types across multiple website channels, create the Navigation content type in Xperience using the Content types application.

See how you can use the dropdown list component to define different navigation menus on your website.

When an editor adds a new navigation menu item, your Navigation content type might look like this:

Have editors create a simple navigation structure

Representatives from the content editor team must participate in the website modeling process. It always helps to get a buy-in from the system users. Have your editors create several items in the content tree to get their feedback on how you’ve modeled the navigation content type and the whole navigation process.

During the hands-on testing, users raise questions and might bring out friction points they see when they use the content type. Listen to their feedback. They are the customers; they will use your designs daily, and you still have time to address their concerns.

For example, in our demo scenario, editors were confused that they created a navigation menu group and individual menu items with just one content type. And they might let you know that the visual experience where every item in the hierarchy was represented by the same icon of the content tree felt confusing.

Redefine the editor flow into two Navigation content types

Adjust the editing experience and create an additional Navigation group content type that editors will use to define sets of links. The new Navigation group will serve as a parent item for the links within the navigation menus. At the same time, editors can create a link from the Navigation group, should they need it.

Your final types for creating navigation menus might look like the following

Finalize your content type and get a write-off

Adjust both Navigation group and Navigation item content types, add instructions for editors to the new type, add anything missing during the testing, and resolve conflicts in data types and order of fields.

Once your content types for creating website navigation menus are done, hand over the definition to your team.

If you’ve followed the example in this guide, your editors can create four different navigation menus in any website channel using the visual hierarchy of the content tree. Here’s an example of a demo of the Kbank Personal site’s navigation menu.