Inputs & Textarea
Pull to Refresh
React Grid Layout
Header is a robust component offering standardized Goldman Sachs branding, navigation, search, notifications and profile utility.
Header has two variations — blue background and white background.
The brand area can accommodate an icon, app name and an environment indicator.
Navigation can be presented as a horizontal tab navigation or as a hamburger menu. Three levels of navigation are supported.
Search can be included in the header. It can be collapsed or open by default.
For Search, both the open and collapsed state can be expanded to take up a larger percentage area of the header container when active.
The header provides a set of utilities to be used in an application when needed.
The Notification component has two variations — categorized & uncategorized.
Profile has a custom profile component only accessible in the header. A set of secondary buttons and a primary button is provided for common interactions.
The settings menu can consist of a few form elements — Checkbox, Radio and Switch. Settings changes made by the user with the form elements in the menu should take immediate effect.
Help can contain a list of options for navigation and one primary button.
One shortcut button can be included in the header. This can be used when there is a need for a single user shortcut for a commonly performed action such as creating a new file or requesting approval.
The header has built-in responsive behaviors to accommodate the most common breakpoints. If horizontal tabs are used, the menu automatically transforms into a hamburger menu when the screen width is too small to accommodate the full menu.
The hamburger menu includes the primary navigation and also holds the utility navigation at smaller screen sizes.
The header can be pinned to the top of the viewport as scrolling occurs.
Header can be displayed in three sizes — large, medium and small.
Header is full width by default, but can be set to have a maximum width to align to app content.