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. 

Structure

The universal header is divided into the following sections :

Current apps

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

Full view apps

Showcases full view apps. The down arrow hides/shows the entire full view apps list.

Popover apps

Showcases popover apps. The down arrow hides/shows the entire popover apps list.

Settings apps

Showcases icons related to universal functions such as search and full screen.

My profile

Indicates who signed in and reveals settings menu when tapped.

Responsive layout

The universal header shall have a responsive layout to adapt to all screen size and orientation.

Screen width: more than 1025px

When the screen width is wider than 1025px, all sections of the universal header shall be visible.

Screen width: 1280px

Screen width: less than 1025px

When the screen width is lower than 1025px, the current and the full view apps sections shall show less content.

Current apps section: The amount of information visible shall decrease with the width. Users could click on the section to see hidden content.

Full view apps section: The number of apps shall decrease with the width. Users could click on the arrow to see the full list of apps.

Screen width: 830px

Screen width: less than 641px

When the screen width is lower than 641px, most content shall be hidden.

Current apps section: This section shall be displayed as a logo. Users could click on it to see the content.

Full view apps section: This section shall be displayed as a logo. Users could click on it to see the list of apps.

Popover apps section: Only the notification app shall be visible.

Settings apps and my profile sections: An hamburger menu shall replace these two sections. Users could click on it to access settings and profile options.

Screen width: 600px

Full view apps behavior

Rearrangement

Users can personalize this section by dragging and dropping apps to change their order.

Screen view

When hover, a tooltip with the icon name is displayed.

If selected, the app is seen full view.

Current app section

This section shows the selected app icon and name.

Popover apps behavior

Rearrangement

Users can personalize this section by dragging and dropping apps to change their order.

Screen view

When hover, a tooltip with the icon name is displayed.

If selected, a popover appears with the possibility to go full view by tapping on the popover title.

Current app section

This section shows the selected app icon and name ONLY if the app is seen full view.

Settings apps behavior

Screen view

A full view is displayed when an app is selected.

Current app section

This section shows the selected app icon and name.

My profile behavior

Screen view

A modal with a list of settings appears by tapping on the avatar.