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

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: Go to t4.vcu.edu and navigate to the "Site-Header" section.
• Select: Use the "Compass-Header" component in T4.
• Name: Enter content into the required "Name" field. 
• Unit name: 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.
• Parent name: Use the optional "Parent name" and "Parent URL" fields to include the name of and link to your parent organization
• Theme: Select from one of four header themes (required):
  • Dark
  • Gold
  • Gray
  • White
• Add utility navigation: 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.
• Enable search: 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.
  • Select search collection: 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.
  • Select search scope: 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

• Access T4: Navigate to the T4 site structure page.
• Create a section to add a utility link: To add a page to the utility navigation, click the blue "Actions" button next to the "Site-Header" page and select "Create section."
• Setup the utility link: 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

• Link types: Quick links in the utility nav can go to internal or external web pages.
• Limitations: The number of utility links is limited to five within T4, but should be manually limited to five when used elsewhere.
• Usage suggestions: 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:

• Name: Provide a name for your header component.
• Unit name: A unit name (your site will display T4 channel name if left blank)
• Theme: A theme selection
• Search option: The search feature set to enabled or disabled

Accessibility considerations

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