Manual Navigation

Manual Navigation is available for both the Top Navigation in your agency header and as Side Navigation with a template.

Manual Top Navigation may be built just 2 levels deep, meaning the navigation can be made up of a series of parent links that display in the top navigation, and a series of child pages that will display in the dropdown when user roll over the parent link. 

Keeping in mind that top navigation can only be built 2 levels deep, it will be helpful to plan out your navigation as an outline that follows a format similar to the following:

• Red Items

  • Crimson

  • Claret

  • Crimson

  • Barn Red

• Yellow Items

  • Cadmium

  • Canary

• Green Items

  • Olive

  • Forest

  • Lime

  • Hunter

  • Jade

We'll use this outline plan to build an Agency header navigation that looks like the following:

Once you have your navigation planned out, you can create your nav by building a new page using the “Manual Top Navigation” template.

To create your page, enter a Title (required) and press the “Create” Button.

Continue editing your page by selecting the “Open’ button on the next window.

You’ll notice that the Top Navigation Page only allows a single component, the "Navigation Item."

You will need to add a Navigation Item for each Parent or top-level navigation item. For this example we will need to add 3 navigation items; for red, yellow, and green.

Once you’ve created each top-level navigation item, you can edit as follows:

• Give your item a “Title” which is the text that will display in your agency header nav.  For our example we will title our first Navigation Item “Red Items”

• If you want your top-level nav item to link, enter a page path or url, and indicate whether you would like the link to open in a new tab (recommended for external links only)

• Add Nested Items that will fall under your parent nav item.  You will need to include a Title and Url for each child link item you wish to display.

You will repeat the above steps for each of your parent-level nav items. Once you are complete, your page will look similar to this in AEM.

Once you are done authoring your page, you can add it to your site by editing the agency header and selecting “Manual Navigation” in the Navigation properties tab.

(For more information visit our Agency Header control page.)

Adding manual side navigation to your site is similar to adding manual top navigation, but it has a couple of significant differences:

• Side Navigation supports a Title for the Side Nav

• You can build child-navigation items up to 4 levels deep.  

Nesting child nav items within other nested child items can be confusing. It’s best to first plan out your side navigation in outline form:

My favorite Colors

• Red Colors

  • Dark Red Colors

    • Blood Red

      • Blood-Orange 

    • Crimson

  • Bright Red Colors

    • Claret

• Green Colors

  • Dark Green Colors

    • Forest

    • Hunter

  • Light Green

    • Lime

• Yellow Colors

  • Muted Yellow

    • Mustard

  • Bright Yellow

    • Fluorescent 

      • Neon Yellow

    • Bright

      • Lemon 

      • Sunshine

Once you have your navigation planned out, you can create your nav by building a new page using the “Manual Side Navigation” template.

To finish creating your page, enter a Title (required) and press the “Create” Button.

Continue editing your page by selecting the “Open’ button on the next window.

Once you have created your Side Navigation Page, you will see a page with a default title and the ability to add just a single component type, “Navigation Items.”

Edit the default title and add your navigation items adding Titles and URLs for both parent and nested child navigation items. 

TIP:
Nesting child links more than one level deep can be confusing.  We recommend that you first build out your top level / parent navigation items first, then add just the first child level links. Then build out any nested child links one level at a time. This is not a requirement, but it will help you visualize your structure within AEM.

Once you have created your page in AEM, it will look something like this: 

Your new Manual Side Navigation can now be added to any template that supports side navigation by editing the side nav, choosing “Manual” in the settings and pointing to your new Manual Side Navigation Page.