Universal header

The universal header is a FOLIO core component that makes it easy to search and navigate between the different Folio apps. Both new and returning users shall be able to figure out how to move through Folio with ease. 

The universal header is divided into the following sections :

Current apps

Indicates the location of the user within the site’s hierarchy.

Apps list

Showcases all FOLIO apps.

The down arrow hides/shows the entire apps list.

My profile

Indicates who signed in and reveals settings menu when tapped.

The universal header shall have a responsive layout to adapt to all screen size and orientation. To do so, the apps list section should rearrange depending on the screen width.

Screen width: more than 767px

When the screen width is wider than 767px, apps should be visible in the apps list section. The number of apps visible should decrease with the screen width.

Screen width: less than 767px

When the screen width is lower than 767px, all apps should be hidden under the “Apps” icon.

Selecting an app

When an app is selected, its logo & name should appear in the current app section and its background should be blue in the apps list section.

View app list

To see all FOLIO apps, users can click on the “Apps” button to see the full list.

The list should have alternating background colors to optimize reading comprehension.