Navigation is a key aspect of information architecture. The quality of the navigation determines a user's ability easily to find content.

Top Level Shows Children Pages

Luther College websites utilize top level Shows Children pages that act as expandable sections or categories for related web content. These top level pages are only accessible through breadcrumbs and should be kept blank. To change a top level page to a section or category, change the page type to either Shows Children or Shows Children with First Images.

Most Important Pages First

Our website has a left sidebar navigation convention for individual sites. Users start looking from the top. Therefore, it's best to put the most important most frequently accessed pages at the top.

Use Straight-Forward Language

The navigation is not the place to get creative. Use conventions when possible (e.g. "About," Contact," "Mission") and try to make the navigation labels as obvious as possible. User testing can help determine if you are using the correct labels.

Not Too Many Top-Level Pages

If there are too many top-level pages in the left navigation, users are not able to scan quickly for information. We recommend no more than six top-level pages.

Child Pages in Navigation

Regular pages can have child pages (pages under them). This is a nice way to organize large quantities of content without overwhelming the navigation.

You can see an example of child pages in the navigation on the left or under the "hamburger icon" on the top right of your screen, if you are on a mobile device.

Do not add child pages in more than one place in the navigation. This is called polyhierarchy, and it's generally confusing to users. 

Special Events and Initiatives

We do not recommend adding temporary pages (e.g. annual events, special fundraising drives, etc.) to the main navigation. A better way to call out these types of events is to add a feature on the homepage and potentially add a call-out in the sidebar.

Avoid External Links

Avoid linking out to other websites from the left navigation. This is disorienting to users.

Learn more about information architecture and navigation best practices in the article "Top 5 Mistakes in Website Navigation."

Navigation Differences Between Desktop, Tablet, and Mobile Devices

This is the standard desktop view. Any screen larger than 1020 pixels wide will see the top menu and the side menu as shown:

This is the tablet view (e.g. iPad). Note that in the below screenshot, the users has selected to view the Admissions menu:

This is the mobile view on a smartphone. Note the two levels of menus. The top left is for the main menu and the top right is for the site-level menu—in this case, Admissions:

Below is the mobile view again, but with the main menu expanded: