Header

Headers are located on the top of each page of your website, just below the brand bar. They help users identify their location and provide a quick way to reach your site’s homepage.

Examples

Example of the Compass Header component

Code reference

When to use

The header component is a requirement for every VCU site. Headers contain four elements:

Unit name: The large header that gives your site its main title.
Parent name: The smaller text that sits above your main site title. This optional feature allows schools or departments to provide a link to their parent organization.
Quick links: Also known as the utility navigation, this optional menu is used for links that are supplementary to the main content of your site.
Search bar: An input field that allows users to search for content within your site.

How to use

Adding a header

Access t4.vcu.edu and navigate to the "Site-Header" section.
Select the "Compass-Header" component in T4.
Enter content into the required "Name" field.
Enter the name of your school or department into the "Unit name" field. If left blank, the header will display the name of the T4 channel.
Use the optional "Parent name" and "Parent URL" fields to include the name of and link to your parent organization
Select from one of four header themes (required):

Dark
Gold
Gray
White

If your site includes a utility navigation, click the "Add section link" button to add the location of your quick links. Learn more about setting up a utility navigation.
Use the dropdown menu to determine whether to enable or disable the search feature on your site. Compass will set the search feature to ‘enable’ by default.
The “search collection” option correlates to a series of websites found within VCU’s search engine, Funnelback. If you’re unaware of what collection your site falls under, or you don’t want to limit your site’s search to just a set of websites, leave this blank.
The “search scope” option correlates to a URL pattern to narrow down the search. This is commonly used to narrow the search to just the current website by providing the current website’s URL in this field.

Adding a utility nav

Navigate to the T4 site structure page.
To add a page to the utility navigation, click the blue "Actions" button next to the "Site-Header" page and select "Create section."
Add a name for the page, check the "Mark as link section" box and click on the "Details" tab.
If the link is to an external page, select the "External URL" option and add the link to the "Link URL" field.
If the link is to a page within your site, select the "Section" option, click on the "Select section" box and click on the internal page you would like to add.

Tips

Quick links in the utility nav can go to internal or external web pages. The number of links is limited to five within T4, but should be manually limited to five when used elsewhere.
Consider using quick links to highlight a nested second level page that wouldn’t normally be shown in the main navigation such as "News" in a site structure such as "About us > News."

Requirements

The header component requires:

A name (only visible in T4)
A unit name (your site will display T4 channel name if left blank)
A theme selection
The search feature set to enabled or disabled

Accessibility considerations

All header themes have been designed and developed to meet accessibility requirements.