Left-Hand, Manual, and Site Navigation Elements

Proper setup of your site's navigation is important to get users to the correct content they are looking for. Whether the implementation is automatic based on site structure or configured manually by the author(s), it is important to understand how to leverage these components properly and effectively.

Left-Hand Navigation

The Left-Hand Navigation component renders out important structures of a given section of a website by introducing quick links to navigate between pages of these sections. Several options exist for setting up these components:

Selection: Site Structure or Manual - Site Structure will use a user-defined root path and will display child pages while Manual displays user-defined items.
- When selecting Manual, only a field titled "Configuration Path" exists. We will go into further detail on Manual Navigation components.
Navigation Root: Parent page where children are pulled from.
Exclude Root Levels: Sets to "1" by default. Shows immediate children to the parent. Setting this to "2" will skip children and pull grandchildren pages, while setting this to "0" will display the pages that are in the same path as the Parent. This rarely needs changed.
Collect all child pages: Check to pick up all pages under the Parent/Root. Uncheck to display another field;
Navigation Structure Depth: shows when "Collect all child pages" is unchecked. Determines number of levels to travel for child pages.
Disable shadowing: Sometimes a page in the navigation is redirecting to another location. When unchecked, the title displayed for an item will use the title of the page being redirected to. If the option is checked, the titles will display as that page's specific title.

Site (Top) Navigation

The main top navigation you see as headings at the top of every page of your website is controlled via the Agency Header component. Of the 5 tabs present, we only need to be concerned with the "Navigation" tab.

Site Navigation is set similarly to the Left-Hand Navigation, but with fewer options that need set:

Selection: Site Structure or Manual - Site Structure will use a user-defined set of parents and will display child pages while Manual displays user-defined items.
- When selecting Manual, a field titled "Configuration Path" is used to set this up. We will go into further detail on Manual Navigation components.
Title: Displayed title for the Heading of the Navigation
Link: Set the link of the Heading Parent page
Open in New Tab: Check or uncheck
Navigation Background Color: background color of the container that stretches across the heading area of the site navigation.

Manual Navigation

Often times, the site structure doesn't perfectly mimic exactly the information we want to display to users, with websites frequently bouncing from one section to another or overlapping with similar sections. To alleviate this, we have the ability to set up Manual Navigation templates for both Site Navigation and Left-Hand Navigation.

The current standard for Illinois Agency websites is to utilize a "Navigation Menus" redirect page (in Sites) that houses all custom, manual navigation items for the website. This helps keep all custom elements together and easy to find when updating is required. There are 2 page templates that may be used: Manual Side Navigation Template and Manual Top Navigation.

Regardless of which item you need, the setup is identical, barring the Manual Side Navigation has an additional "Text CTA" component for the H3 title when rendered.

A single component is able to be added to these template pages, called "Navigation Item."

For Manual Top Navigation, there should be 1 Navigation Item per Heading, with child pages/items added as a Nested Item.
For Manual Side Navigation, there should be 1 Navigation Item per child, with grandchildren added as a Nested Item.

*Note: Currently there is an option for further nested items as a "Nested Item title(?)" and does not function appropriately. Avoid using this and keep manual navigation items to:

For Manual Top Navigation, only Navigation Item Title's for headings and Nested Items for Children (No Grandchildren).
For Manual Side Navigation, only Text CTA for Heading, Navigation Item Title's for Children, and Nested Items for Grand-Children.

Page Publishing & Versions

As is evident, Manual Navigation elements are controlled via Page templates, which means that these "pages" also need Published and Workflowed via the SOI Request for Activation Workflow for new content or changes to be viewable. Versioning works the same way for these templates as any other page templates; letting users create manual versions to revert to during complex updates.