Model website navigation

✖
Copy to clipboard

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:

Your marketing team oversees several company websites in multiple languages. They want to curate the navigation menu themselves, sort the items into groups, and ensure that each group of nav items lives on an appropriate level, either primary, secondary, or tertiary. They need to create links to different pages that are either part of the website, on another website channel in Xperience, or running on a 3rd-party solution outside Xperience.

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:
    Simple navigation on the Kbank demo site
  • Side menus can nest up to three levels.
  • Some of the parent items will contain a hyperlink.
    Conceptual draft of navigation structure with that contains several menu items without a link
  • 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.

Conceptual graph of a navigation content type

Requirements for building navigation will change depending on the website channel hierarchy, the complexity of the project, and the size of each website channel.

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.

We recommend using the content tree to organize navigation items in a hierarchy if you want to use out-of-the-box features. As Xperience by Kentico is an evergreen product, we recommend following the public roadmap for related upcoming features.

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:

Content model description in Excel with content type’s fields and instructions

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:

Diagrams shows the flow how editors will be creating the website’s navigation menu

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:

Navigation menu content types in the Kbank demo website

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.

Navigation menu structure modeled in the website channel’s content tree

Redefine the editor flow into two Navigation content types

Talking to Kentico customers, we found that users with less technical background sometimes felt confused that one item can reference another item of the same type or even become a parent to other items of the same type (and create a hierarchy). As you are not limited to a specific number of content types by your license in Xperience by Kentico, you can create another content type to improve the editing experience.

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

Content model for navigation menu

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.

Content model for website navigation in an Excel spreadsheet

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.

Example of navigation menu structure in the Kbank demo site