Navigation

Also known as: Nav

The navigation provides users a way to move through your site. In Compass, the navigation is not limited (though it is recommended to keep it to three levels deep), and there is a dropdown level to access subsections. On small screens and phones, a mobile menu that incorporates the navigation is automatically generated.

Examples

  

Code reference

• Main dark
• Main light
• Sub light
• Sub dark
• Breadcrumb

When to use

Compass offers four navigation options:

• Main navigation: Displays the site's structure at the top of a page layout, beneath the header.
• Sub navigation (Sidebar navigation): Displays the site's structure vertically in the left-hand sidebar of interior pages. On small screens and phones, the sub navigation is not displayed.
• Breadcrumb navigation: Displays the user's location on the site at the top of interior pages, above the general content area.
• Utility navigation: Displays up to five quick links in the site header.

Best practices for using navigation

• Include a main navigation for every site with more than one page.
• Every page should be included in the navigation unless there is a specific reason for keeping it hidden (e.g., forms, surveys, and campaign promotions are typically not included).

Styling your navigation

• In Compass, both the main and sub navigation can be styled in either a dark or light theme.

How to use

Setting up the navigation

• Access T4: Go to t4.vcu.edu and navigate to the "Site-Header" page for the main navigation or the Site-Nav page for the sub navigation.
• Add nav content type: On the "Content" tab, select "Add content" and choose the "Compass - Nav" content type.
• Name: Enter content into the name field.
• Type: In the type dropdown, select "Main", "Sub" or "Sub (no siblings)."
• Theme: In the theme dropdown, select either "Dark" or "Light" depending on your preference.

Adding pages to the navigation

• Navigate to T4: Go to the site structure page.

• Adding to the top-level navigation bar:

  • Click the blue “Actions” button next to your site name.
  • Select “Create section.”
  • Provide a name for the section.
  • Ensure the “Show in navigation” box is checked (this box is checked by default; unchecking it will hide the page from the navigation).

• Adding to the subsection dropdown:

  • Click the blue “Actions” button next to the subsection parent page.
  • Select “Create section.”
  • Provide a name for the section.
  • Ensure the “Show in navigation” box is checked.

• Finalize the page setup:

  • After saving changes, return to the site structure page.
  • Click the link to the new page and select the “Content” tab.
  • Click the “Add content” button and select a content type to place on the page.
  • The page will not appear in the navigation until content is added.

Tips

• Page width: Limit the character or word count of top-level main navigation sections to prevent overcrowding.
• Content requirement: Ensure each page has content to appear in the navigation.
• Sub navigation settings: The “Sub” navigation option displays children and grandchildren by default. If no grandchildren exist, it will show siblings and children. If “Sub (no siblings)” is selected or “siblings” is set to false in nav.sub under components.json in the core repo, nothing will show if children and grandchildren do not exist.
• Sub navigation height: The maximum height is 10 links; additional links will become vertically scrollable.

Requirements

The Compass-Nav content type requires:

• Name: Provide a name for your nav component.
• Type: Select a type selection (main or sub)
• Theme: Select a theme selection (light or dark)

Accessibility considerations

Each section of the navigation must have a name that clearly describes the content. This is particularly helpful for users of assistive technologies so they have the necessary information to navigate the menu without having to expand every section.