MarCom Studio
What kind of services/assistance do you need?
Creative Communication Platforms Marketing Merchandising News Media Official Communication Channels On-Campus Promotion Resources Social Media Strategic Counsel Web ServicesGlobal Headers
Global Header displays global search, a utility bar called Top Bar, and site navigation on the top of the screen.
Overview
- Contains a global search, Top Bar, site logo, and site navigation
- Four layouts: Institutional, Primary - Stacked, Primary - Aligned, and Affiliate
- On scroll the site navigation container is sticky to the top of the window
- The Global Header is the same width as the device window
- Global search is hidden and slides down from the top of the window when toggled
On This Page
Types of Headers
Institutional
Overview
Contains the institutional logo in the site navigation and a Top Bar which includes a global search and institutional quick links
Use Case
The Home Page, as defined in the HOP Policy 11.09 and its top-level institutional pages, if your website has its own navigation, please consider using the Primary Global Header below.
Example Pages
About, Campus Life, Admissions, Academics, Locations
Desktop View
Mobile View
View Institutional Demo Request Code
Primary
Overview
Contains the site/departmental logo in the site navigation and a Top Bar which includes an institutional logo, a global search and institutional quick links
Use Case
UTSA official websites that include a UTSA department/unit logo at the top of the page.
Example Pages
Provost, Alumni, Student Affairs, Institutes, President’s Office, Giving, Alumni
Layout Options
We have provided the options below for a better user experience and to give flexibility on the number of links shown. If your links don’t fit in the Aligned option please utilize the Stacked option for your site navigation.
Aligned
Desktop View
Mobile View
View Primary - Aligned Demo Request Code
Stacked
Desktop View
Mobile View
View Primary - Stacked Demo Request Code
Optional Component
Quick Links Bar
Desktop View
Use Case
For links that need to be emphasized
Max Links
4-5, depending on word length
Affiliate
Overview
This component includes only the Top Bar with no institutional quick links on the right side and only a link back to the utsa.edu homepage.
Use Case
Affiliated sites and third party applications/site may or may not use a UTSA header depending on the business case and technical limitations
Example Pages
Forms, Applications, Boot Camps
Desktop View
Mobile View
View Affiliate Demo Request Code
Guidelines
Usage
| Layout | Best Used For |
|---|---|
| Institutional | Top-level pages |
| Primary | Department or other brand-aligned website |
| Affiliate | 3rd party applications and sites |
Do's & Don'ts
- Do link back to the utsa.edu homepage
- Do accessibility audits via the WAVE Tool after edits/additions
- Do use parent links to group items and not to link to a page
- Do keep navigation only two levels deep, parent and children
- Don’t use more than 9 parent links each with 10 children max
- Don’t add too many menu items, less is better and best practice, too many options causes fatigue for the user
- Don’t change menu items font size, weight, or style
- Don’t change any brand colors or fonts
Responsive Layouts
Responsiveness is handled via Bootstrap 5’s columns and rows and should only be edited by a web developer or expert when needed.
Accessibility
Users should be able to do the following with assistive technology/keyboard:
- Open and close the global search with ESC and keyboard
- Open and close the mobile menu and submenus with ESC and keyboard
- Read all text or have alternative text using the
altattribute on images - All alternative text/ alt tags must be unique, in other words no doubles or copies
- Tab through all items
- All tab navigable items need to be highlighted visually with appropriate contrast
