---
title: Global University Header
date: 2025-02-03T10:44:00-08:00
author: Zaida Jocson
canonical_url: "https://designsystem.umd.edu/components/global-university-header"
section: Components
---
# Global University Header

Top-most UMD site header that contains global branding and may have additional navigation. All official University of Maryland websites, not including student sites, must be identified with the university header. 
Top-most UMD site header that contains global branding and may have additional navigation.
## Dos
- Must be used on all official university sites.
- Additional links are optional. Avoid duplicating links or content in the main navigation.
## Don'ts
- Minimize the use of additional links. Balance out the number of navigation links to not overwhelm users. A maximum of 3 is recommended.
## Variations

[View component playground: Global University Header](https://playground.designsystem.umd.edu/?path=/story/components-navigation-global-university-header--no-links)

## Accessibility

### Built in accessibility

**Link**
SVGs are hidden from assistive technologies and effective alt text is used on the link itself. Effective text is used to describe what the link is and where it is taking the user. This is clear, descriptive text that conveys the link content succinctly and the purpose and destination of the link. WCAG 2.4.9: Link Purpose (Link Only)Example of effective text: Visit the Instagram page of the University of Maryland

**Meaningful Sequence**
Content in the header follows a logical reading order that makes sense when read by assistive technologies WCAG 1.3.2

**Info and Relationships**
The structure of the header (e.g., logo, navigation list) is conveyed through appropriate semantic HTML elements WCAG 1.3.1

**Input Purpose**
If there is a search input field, the purpose of the search field can be programmatically determined. WCAG 1.3.5

**Orientation**
The header is usable in both portrait and landscape orientations WCAG 1.3.4

**Keyboard Accessible**
Users are able to use the keyboard to navigate through the menu using the ‘Tab’ key to navigate/focus and ‘Enter’ or ‘Spacebar’ to activate.WCAG 2.1.1: Keyboard This navigation is done in sequential and logical order WCAG 2.4.3: Focus Order and focus can move away from the component as needed. WCAG 2.1.2: No Keyboard Trap

**Hover and Focus State**
The actionable items each have distinctive styling on hover/focus to provide a visual cue to the user that the element is focused and there is an action that can be taken. WCAG 1.4.13: Content on hover or focus

**Color Contrast**
A contrast ratio of at least 4:5:1 between text and background color is ensured to enhance readability.  WCAG 1.4.3: Contrast (minimum)

**Responsive Design**
The component scales in relation to the to the screen size to prevent truncating content and reflows properly when zoomed up to 200% without horizontal scrolling WCAG 1.4.10: Reflow

**Consistent**
Styles are applied consistently including line height, font style, weight, spacing and color of text. WCAG 1.4.12: Text Spacing 

## Layout

[View Figma design: Global University Header](https://www.figma.com/design/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?node-id=77835-4472&t=hf1fdN8AaImDcfsf-1)

## Guidelines

Standard links may be turned off and on, but new ones can't be added.