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 :
Indicates the location of the user within the site’s hierarchy.
Showcases all FOLIO apps.
The down arrow hides/shows the entire apps list.
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.