Global and primary navigation

Global and primary navigation are designed to help users to orient themselves and explore a content-rich web site using a set of user interface elements including menus, search bars, link text, and buttons. Navigation also helps visitors understand the relationship between individual web pages. Navigation components are located in the masthead and footer sections of the page.

Standard scope

This standard applies to:

  • pennmedicine.org
  • All Penn Medicine websites
  • Penn Medicine mobile applications
  • All Penn Medicine digital products

Overview

Global and primary navigation components are typically used to:

  • Reinforce brand identity: Consistency in branding builds trust.
  • Reduce complexity: Help users quickly find information in a content-rich web site based on their needs.
  • Reduce barriers to access: Support accessibility and localization.
  • Increase user engagement and business outcomes: Expedite task completion and support campaign flows.

Use cases

The following table provides a summary of use cases for global and primary navigation. Visual examples of each navigation type are also provided.

Global and primary navigation type
Design System name
When to use
Grid layout
Masthead navigation
Navigation-Masthead
Displayed at the top of most pages. Contains site-wide links, shield and wordmark, and sometimes utility actions such as search and login.
12 & 8 column:
single masthead, always at top of page
Minimal masthead navigation
Navigation-Masthead-Minimal
Used when the primary goal is to focus user attention on completing an intended action such as filling out a form, scheduling, or completing a campaign request. Masthead serves the purpose of branding, and when there are localized versions available, a language selector can be included.
12 & 8 column:
single masthead, always at top of page
Footer navigation
Navigation-Footer
Standard footer used across most pages. Includes categorized site links, legal information, and social media links.
12 & 8 column:
single masthead, always at bottom of page
Minimal footer navigation
Navigation-Footer-Minimal
Used exclusively in conjunction with the minimal masthead for focused user tasks where minimal distraction is key.
12 & 8 column:
single masthead, always at bottom of page

Masthead Navigation

The masthead navigation includes the following elements:

  • Utility components - Quick access to common needs such as phone number or login.
  • Shield and wordmark
  • Responsive menu
  • Navigation links
  • Search

When first viewing a page, users are presented with options to select.

If search is selected, the user is presented with a search bar.

If a menu item is selected, and the item has multiple sub-pages, the menu will expand to show an expanded menu of options.  

Minimal Masthead

This streamlined version of the navigation masthead is used to ensure the user is not distracted from the primary focus of the web page, and only includes the following elements:

  • Shield and wordmark
  • Language selector, if localized version of the page content is available.

Footer Navigation

The standard footer provides quick links organized by audience and topic. At the bottom, the footer also includes supplementary sections:

  • Information links such as:
  • Contact us
  • HIPPA & Privacy
  • Terms of Use
  • Legal disclaimer
  • Pricing & transparency
  • Metadata such as:
  • Primary location
  • Primary phone number
  • Date of website
  • Social links

Minimal Footer Navigation

Used only with the minimal masthead, this footer minimizes distraction while still offering necessary legal and contact information.

Navigation Behavior

Interactive

Navigation components support multiple interactive elements that help users understand their location and access content efficiently.

Masthead Navigation Interactions

  • Some navigation links include a downward-pointing chevron icon to the right of the text.
  • Clicking these links triggers a mega navigation panel, which displays a structured set of links organized into three columns.
  • The chevron rotates upward when the dropdown is expanded.
  • Navigation items without dropdowns function as traditional links, navigating directly to a new page.
  • Selecting the search icon expands a search input area with a prominent field and call-to-action.
  • For minimal masthead only, the language menu opens to allow users to select an available language. The page will reload localized content, if available.

Footer Navigation Interactions

  • Most footer links are standard hyperlinks that navigate to external or internal pages.
  • Some links open in a new tab (e.g., social media links) and should include proper aria and visual indicators if they open externally.
  • No dropdown or mega navigation is used in the footer.

States

Masthead Navigation

State
Description
Hover
On hover, text color darkens to show interaction is possible.
Active
The current page’s link is underlined to indicate the active state. This helps users understand their location within the site.
Expanded
When a dropdown-enabled link is clicked, the chevron rotates upward and the mega nav expands below the masthead, revealing categorized links in three columns.

Footer Navigation

State
Description
Hover
On hover, footer links become underlined and/or change to a slightly lighter or brighter color to indicate interactivity.
Active
For persistent footers (e.g., during long sessions or SPA behavior), the active page’s corresponding link can be underlined to indicate current page context—though this is not always required in footers.

Customizable  elements

The global and primary navigation allows for customization of content. The layout supports a variety of elements that can be toggled on or off to create a tailored experience. Below are the key components of the design.

Masthead Navigation

Element
Required/Optional
Guidelines
Shield and wordmark
Required
Always use the shield and wordmark, positioned consistently.
Navigation Links
Required, except minimal masthead
Display main site sections or categories of content. May reflect the Information Architecture of the web site.

Omitted in the minimal masthead.
Language Selector
Optional
Present only in the minimal masthead when localized content is available.
Login button
Required, except minimal masthead
Included in full masthead when authentication is needed. May direct user to another digital experience.  
Search
Required, except minimal masthead
Standard in full masthead; not included in minimal variant.

Footer Navigation

Element
Required/Optional
Guidelines
Footer Link Groups
Required, except minimal footer
Grouped by audience or content type in the full footer.
Legal/Contact Info
Required
Always present in both full and minimal footers.
Social Media Icons
Required, except minimal footer
Primary social channels managed by the brand for this organization.

Guidelines (do’s and don’ts)

Do
  • Use minimal masthead and footer together to maintain consistency.
  • Ensure accessibility of navigation elements
  • Include language selector option when translated content is available and vetted.
Don't
  • Mix minimal masthead with a full footer.
  • Overload the masthead with too many links.
  • Use the language selector if there are no localized pages.
  • Alter component spacing or alignment outside of design specifications.

Related resources

For designers: Visit the Designers section for access to component specs and Figma files.

‍For developers: Visit the Developers section for implementation details and to access the front-end code library in Storybook.

Contact

For more information about this standard, email: web-standards@pennmedicine.upenn.edu

Last updated

Date
Description
Description
05/01/2025
1.0.0
Initial Release
Penn Medicine, Philadelphia, PA 800-789-7366       © 2025       The Trustees of the University of Pennsylvania