COMPONENTS
Header
Header is a robust component offering standardized Goldman Sachs branding, navigation, search, notifications and profile utility.
- Outer Container
- Brand Area
- Active Navigation Item
- Primary Navigation
- Search
- Utility Area
- Fly-out Navigation Menu
Header has two variations when using a solid background — blue background and white background.
Header background can be set to be transparent when it needs to sit over content on the page such as imagery. The foreground elements (text, icons and logo) can then be set to light or dark depending on contrast needs.
The brand area can accommodate an icon from the iconography system, an application name in text format and an environment indicator badge. The environment indicator badge defaults to yellow for DEV, purple for QA and gray for all other environment labels.
Additionally a product identifier can be added to the header. The supported file type is an svg image and will be automatically sized to fit in the selected header size.
Navigation can be presented as a horizontal tab navigation or as a hamburger menu. Three levels of navigation are supported.
Secondary and tertiary navigation items are displayed in menus when hovering on the parent item on large screens. See responsive behavior below for the menu display on smaller screens.
Header navigation items have six possible interaction states — enabled, selected, hover, active, focus and disabled.
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.
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.
Header can be set to be fixed to the top of the viewport in a sticky position. This allows the user to scroll through long page content but still have access to the navigation and utilities available in the header.
Header can be displayed in three sizes — large, medium and small.
Header is fluid and will span the full width of the viewport by default, but can be set to have a maximum width to align to app content on the pages. It is recommended to keep the same width of a navigation throughout your application.
Contents