Carnegie Mellon University

CMU Web

A service provided by the University CMS Team

Site-Wide Elements

Site-wide elements are the items that appear on every page, and are identical on every page. Site-wide elements are categorized into Header, Navigation and Footer regions.

Example of a page with the site-wide elements header, navigation, and footer regions highlighted

The header appears at the top of every page. You may choose the color of the "roof" (the top-most bar with the university's wordmark) to be white, red, or dark gray. In addition to the department or group name, configurable options are available for other elements.

configure the header

Elements

  1. Carnegie Mellon University wordmark with clickable link to the university's home page
  2. Name of the department or group
  3. Parent organization or slogan (optional)
  4. Search box for site search or university-wide search
  5. Hamburger menu (because it looks like a hamburger!) opens the side navigation
  6. Logo (optional)

Navigation provides the functionality to traverse a site using menus that are available on every page. Navigation is automatically generated as you build your site; however, configuration options are available such as where an item should appear. Navigation is provided in several regions of a page.

configure the navigation

Elements

  1. Top navigation spans the full width of a page and can accommodate up to 10 items
  2. Side navigation is a slide-out menu that is either open or closed per-page depending on several factors. It can be opened manually using the hamburger menu and closed using the X at the top right. The department or group name at the top is a clickable link to the site's home page. If a navigation item contains subpages, clicking on the arrow near the item will expand the menu.
  3. Primary area of the side navigation is the upper region; it displays all items in the top navigation and can accommodate more
  4. Secondary area of the side navigation is the lower region; it is ideal for complementary or supporting information and is optional
  5. Breadcrumb links are provided to reference your location on the site in relation to the home page

The footer grid appears near the bottom of every page immediately above the lower footer. It is ideal for providing content that is easily accessible throughout your site, such as important links.

Configure the footer grid

Elements

  • Select 2-4 columns, a single row
  • Each column may be a WYSIWYG (an open content area for text, media, images and more) or a list of links
  • Choose a background color of red, gray, or dark gray

The footer is the bottom-most region of every page. Configurable elements include contact information and social media.

Configure the footer

Elements

  1. Department or group name and customizable contact information including address, phone and email
  2. Links to legal information and the university's home page, and copyright year (not configurable)
  3. Social media links (optional)