Information Architecture & Navigation

Navigation (menu) items are based on the information architecture of your website. See Information Architecture & Content Development for resources to help you develop the information architecture and content for your website

The Cascade wizards and assets that are used to make up the items in both your primary and secondary navigation are exactly the same. But your information architecture dictates which assets you use to create your items, and where you use them.

If you're not sure how to get started, the following information illustrates how to turn your information architecture into your navigation structure.

Information architecture as navigation hierarchy

Consider the following organizational hierarchy example:

  • Section One
    • Page 1
    • Page 2
    • Sub Section One
      • Page A
      • Page B
      • Page C
  • Section Two
    • First Page
    • Second Page

The organizational hierarchy can then be translated to information architecture based on how it's grouped together:

  • Section One is a top-level item that contains a group of other items; Page 1, Page 2, Sub Section One.
  • Sub Section One is an item that belongs to Section One, but it also contains it's own group of items; Page A, Page B, Page C

Primary (Global) Navigation and Primary (Global) Sub-navigation:

To explain how we take the information architecture (organizational hierarchy) in the example above and use it to build our navigation, we'll consider it sort of like a parent/child relationship.

For the purposes here think of a "parent asset" as a section that contains children, whereas a "child asset" can be either a page (can't have child assets) or a section (can have child assets).

If we were to start turning the above information architecture into navigation items, then we would treat the top-level Section One as a parent asset (it's also a child asset of the Base Folder, but for simplicity we'll just think of it as a parent asset for now). Top-level items need to be part of the Primary (Global) Navigation in order for them to be in the black horizontal bar.

Primary navigation example


To do this, we used a Section Folder wizard and placed it directly under the Base Folder.

  • Why was it created using a Section Folder wizard? Because we needed to be able add the child assets listed in the example above (Page 1, Page 2, Sub Section One). If we had used a Page wizard it would look exactly the same, but if we continue with the relationship analogy, pages can't have child assets.
  • Why was it placed at the first level below the Base Folder? You can think of the Base Folder as the section folder for your site. What this means is that we needed to think of it as a child asset of our Base Folder. 
Notice that the index page under the Base Folder acts as the landing page for your website, just like the index page that's generated with each Section Folder wizard is the landing page for that particular section (parent asset).

Continuing with our information architecture example, it looks like Section One should have 3 child assets - but upon closer inspection we see that there are actually 4

  • Section One (index page) - this is the landing page for Section One (the index page is automatically created for you when you use the Section Folder wizard)
  • Page 1 - using the Page - Basic Layout wizard
  • Page 2 - using the Page - Basic Layout wizard
  • Sub Section One - using the Section Folder wizard

These four child assets then form the Primary (Global) Sub-navigation (dropdown), as well as the Secondary (Contextual) Navigation (right side).

You've probably noticed that they're not in the same order on the website view as they are in the folder structure. This is because Cascade lists folders and pages first by asset type, then sorts them alphabetically. But since that doesn't match the information architecture, we need to manually changed the order of the Navigation (Menu) items.

Secondary (Contextual) Navigation

Continuing with the information architecture (organization hierarchy) example:

  • We need use the Section Folder wizard to create the Sub Section One child asset. Why? Because it's also a parent asset - we need to be able to add child assets to it (Page A, Page B, Page C).

As shown in the above illustration, Sub Section One is both a Primary (Global) Sub-navigation item, and Secondary (Contextual) Navigation item. But as a section folder (parent asset) it also contains its own Secondary (Contextual) Navigation (child assets), as shown below.

Example web structure


If we look at the site map that's generated by our example you can see what's meant by the sentence at the top of the page: "Navigation (menu) items are based on the information architecture of your website."

information architecture to site map

Last modified on