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

The Minimal Masthead is a streamlined header component featuring a shield and word mark, with an optional language selector. Designed for conversion-focused and global content pages, it minimizes distractions by removing full site navigation and keeping users focused on key actions and information. It includes the following elements:

  • Logo
  • Represents the primary brand identity.
  • Displays the shield and word mark in the top-left corner.
  • Clicking the logo always takes users to the homepage.
  • Language Selector (Optional)
  • Compact control that allows users to switch the site's language.
  • Should only be included on pages intended for audiences whose primary language is not English.
  • Selecting a language reloads the page in the chosen language
  • Globe Icon
  • Visual indicator that reinforces the purpose of the language selector.
  • Hidden on mobile devices.
  • Displayed on desktop screens only.
  • Language Label
  • Displays the currently active language.
  • Clarifies the selected language option.
  • Serves as the clickable trigger to open or collapse the language selector.
  • Chevron Icon
  • Displays an up or down chevron that whether the language selector menu is expanded or collapsed.
A representation of the Minimal Masthead

Guidelines (do’s and don’ts)

Do

  • Use the Minimal Masthead on conversion-focused pages, such as campaigns and forms, to keep users focused on completing key actions
  • Use for pages that don't need internal navigation but do need language selection
  • Include the language selector only for non-English audiences.
  • Allow the masthead to scroll naturally with the page content
  • Store the selected language in a cookie for future visits

Don't

  • Don't add navigation menus, eyebrow navigation, search bars, or other complex elements to this minimal masthead
  • Don't use this masthead for pages that need internal site navigation—use the full Masthead component instead
  • Don't include the language selector if your content is only available in English
  • Don't make the masthead fixed or sticky to the screen—it should scroll naturally with the page
  • Don't link the logo to anywhere other than the homepage
  • Don't navigate users to the same page in a different language when they click the browser back button after changing languages

Behavior

The minimal masthead is fully responsive, adapting its layout seamlessly for smaller screens while maintaining consistent functionality across all breakpoints. It spans the full width of the viewport with consistent spacing across screen sizes and remains visible as part of the page content, scrolling naturally with the rest of the page.

  • The language selector is optional and should only be used on pages targeting users whose primary language is not English
  • Clicking the selector opens a menu showing all available languages
  • The selector updates to reflect the newly selected language
  • The selected language is stored in a cookie and used for future visits to the site. If no language cookie is detected, the site defaults to English
  • After changing languages, clicking the browser back button returns users to their previous page, not to the same page in a different language
  • On mobile devices, the language icon is hidden to save space, showing only the language name and selector

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

This footer minimizes distraction while still offering necessary legal and contact information.
Elements include, and cannot be customized:

  • Contact us
  • HIPPA & Privacy
  • Terms of Use
  • Legal disclaimer
  • Pricing and transparency

Do

  • Use each navigation component only within its specified context.
  • Ensure interactive states meet accessibility standards.
  • Keep link labels short, clear, and relevant to the content structure.
  • Test scroll behavior for jump tags and sticky rail performance.
  • Match breadcrumb labels to page titles
  • Reflect the site's information structure in breadcrumbs
  • Provide clear focus indicators for keyboard navigation
  • Keep breadcrumbs on a single line

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.
  • Localize only when translation 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
Version
Description
09/02/2026
1.0.2
Updated the minimal masthead content
08/26/2026
1.0.1
Updated the minimal footer content
05/01/2025
1.0.0
Initial Release
Penn Medicine, Philadelphia, PA 800-789-7366       © 2025       The Trustees of the University of Pennsylvania