Masthead, logo and navigation

Our website is often the first impression people have of the university, and the masthead is the first thing they see on the website. It is important that the masthead promotes the UNH brand, provides top-level options that show the breadth of the university, locates the user on the site, and follows a consistent structure in order to help users easily navigate the UNH web universe.

Related Information

Purpose and Audience

The masthead consists of two areas, the main navigation and secondary navigation. The main navigation is used to identify the site and the user’s current location in the site and provide main navigation for that section. A small, top, secondary navigation provides links to other important areas of the unh.edu site, as well as search functionality.

Masthead Software

UNH Communications and Public Affairs (CPA) and Academic Technology (AT) are responsible for and will collaborate to ensure a consistent masthead and branding. The primary software application supporting the unh.edu website is Drupal, but this standard applies to all unh.edu mastheads, whether or not they are built in Drupal.

Guidelines for All Mastheads

All UNH sites must meet the current masthead specifications for logo; college, department or service name; menu items and upper menu items. Secondary logos, photos or third-party branding are not allowed within the masthead. All UNH websites and pages available through links from other UNH webpages or through organic search engines must display the masthead. (See Guidelines for web applications below for exceptions for approved external web applications.)

Guidelines for All Top-level Site Navigation

The main navigation is displayed on a bar in UNH blue with white text. The secondary navigation is displayed on a bar in dark blue (#001d52) with white text. The site's primary menu navigation should feature a horizontal display to the right or underneath the masthead or title, based on the type of page.

Guidelines for Menu Navigation

Links within the horizontal or vertical navigation bars should be used exclusively for navigation within your website. External links and links to .pdfs are not allowed in any top "megamenu" navigation, except for links to external websites that meet all the following criteria:

  • The linked site has "unh.edu" in the URL
  • The two sites have a business/reporting relationship

Otherwise, external links and links to .pdfs should exist only within the body copy. In addition:

  • Internal links should open in the same window
  • External links should open in a new window
  • Social media links can share space with the title or navigation or can reside elsewhere within the site, including the footer

Logo

  • College and school sites display the outline version of the sub-brand horizontal logo. See UNH Brand Guidelines for more information.
  • Logos are left-aligned in the main navigation bar.
  • The logo links to the college/school homepage.

Main navigation

Top-level college/school navigation can have up to seven menus (site sections), right-aligned and vertically aligned with the bottom of the logo. Each menu, when rolled over, displays a mega-menu that can contain an image plus two to three columns of links comprising all the secondary-level pages. The naming and order of appearance are the same, with few exceptions, from website to website. Exceptions include the addition of up to two additional site sections (e.g., Arts, Centers & Institutes, Executive Education, Library, Student Experience).

  • Academics
    • Programs of Study
    • Dept 1
    • Dept 2, etc.
    • Study Abroad
    • Scholarships
  • Admissions
  • Careers
    • Student Resources
    • Employer Resources
    • College/School Alumni
    • Contact Us
    • Parents & Families
  • Research/Resources/Creativity: Department-wide pages that supports research/resources/creativity, e.g.:
    • Research Exploration by Major
    • Teaching & Research Facilities
    • Opportunities in Faculty Labs
    • Specific research opportunity/facility
  • People
    • Faculty Directory
    • Staff Directory
  • Option One (e.g.: Outreach)
  • Option Two (e.g.: Arts, Centers & Institutes)
  • About
    • Dean’s Office
    • Mission Statement
    • Business Service Center
    • Faculty Awards
    • Staff Awards
    • Information Technology Office
    • Give

Secondary navigation

Secondary navigation links are right-aligned and preset to include:

  • Search this site (Left-aligned)
  • Apply
  • Visit
  • Request Info
  • myCourses
  • unh.edu

Logo

  • Department sites display the outline version of the sub-brand horizontal logo. See UNH Brand Guidelines for more information.
  • Logos are smaller and left-aligned in the secondary navigation bar.
  • The logo links to the college/school home page.

Department name

The department name appears in 24 pt Source Sans Pro font in the main navigation, left-aligned under the college/school logo.

Navigation

Top-level department navigation appears left-aligned under the department name. It includes access to secondary subpages only. Section naming and order of appearance are the same, with few exceptions, from website to website. Exceptions include the addition of up to two additional site sections (e.g., Opportunities).

  • Academics: Department-wide pages that support academics, e.g.
    • Honors in Major
    • Undergraduate Advising
    • Key Documents for Graduate Students
  • People: Department-wide pages that support people, e.g.:
    • Graduate Student Profiles
    • Alumni
  • Research
  • Option One (e.g.: Opportunities)
  • Option Two
  • About
    • Mission
    • Organizational Structure
    • Accreditations
    • Give

A department-level search box appears right-aligned in the main navigation bar.

Web applications guidelines are by necessity more flexible, since some applications allow for more customization than others. Web applications should try to adhere to the following guidelines:

  • Use an approved UNH logo in the upper left on a bar that is either UNH blue, dark blue (#001d52), or black. See UNH Brand Guidelines for more information.
  • Link the logo to unh.edu.
  • Display the application name and/or main navigation on a bar in UNH blue with white text.
  • Use the approved UNH digital font (Source Sans Pro).

Examples

Some examples of web applications following these guidelines:

If you have any questions about branding web applications, please contact WMD. Remember that all web applications through an external vendor require a contract with Academic Technology or Information Technology, or approval from a dean.

Add

Support

For support for mastheads, logos and navigation, please contact Web and Mobile Development (WMD).

Training

Anyone working on a college or school website masthead is welcome to attend the open walk-in training and help sessions that Academic Technology offers in support of Drupal. For a schedule of the training sessions and walk-in times, see the Academic Technology training calendar.

Responsibility for Content

College and school websites are maintained by members of the university community acting as official representatives of the University of New Hampshire. Some editors may have access to the masthead. Site owners are responsible for complying with all relevant laws, university policies and this standard.

Violations

Although UNH AT does not monitor or regularly review website content, it reserves the right to remove any masthead content that it considers to violate this standard any other UNH policies.

If inappropriate content or inaccurate is submitted, UNH AT will contact the site owner to discuss the issue. If the site or content owner cannot be contacted or is no longer at UNH, that content will be administered by WMD and can be removed if deemed inaccurate or inappropriate. When content is obviously unacceptable, UNH WMD will immediately remove the content prior to contacting the site owner. Unacceptable entries also may cause unh.edu access to be suspended.

Reports regarding inappropriate content may be sent to WMD.