COMPONENTS

Header

Header is a robust component offering standardized Goldman Sachs branding, navigation, search, notifications and profile utility.

GS Header
GS Header
  1. Outer Container
  2. Brand Area
  3. Active Navigation Item
  4. Primary Navigation
  5. Search
  6. Utility Area
  7. Fly-out Navigation Menu

Header has two variations — blue background and white background.

GS Header

The brand area can accommodate an icon, app name and an environment indicator.

GS Header

Navigation can be presented as a horizontal tab navigation or as a hamburger menu. Three levels of navigation are supported.

GS Header

Search can be included in the header. It can be collapsed or open by default.

GS Header

For Search, both the open and collapsed state can be expanded to take up a larger percentage area of the header container when active.

GS Header

The header provides a set of utilities to be used in an application when needed.

The Notification component has two variations — categorized & uncategorized.

GS Header

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.

GS Header

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.

GS Header

Help can contain a list of options for navigation and one primary button.

Header Help

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.

Header Button

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.

GS Header

The hamburger menu includes the primary navigation and also holds the utility navigation at smaller screen sizes.

GS Header

The header can be pinned to the top of the viewport as scrolling occurs.

GS Header

Header can be displayed in three sizes — large, medium and small.

GS Header

Header is full width by default, but can be set to have a maximum width to align to app content.

GS Header