Headers

Version 2.0.0

Headers are containers attached to the top of a page that house product-wide or global actions and navigation, as well as user preferences and branding.

A header with sample desktop layout, including a placeholder logo, two tabs labels Home and Your Files, filename, and primary action, Share.A header with sample mobile layout, including a placeholder logo, collapsible menu label Home, and overflow menu.
DateVersionSpectrumApr 06, 20222.0.0DownloadJun 12, 20191.0.0Download

Anatomy#

Image illustrating through labels the parts of a header on desktop, including its home branding and icon, optional tabs such as modes, workspaces, local links, and top nav, optional document name, optional product-level button, and optional avatar with sign in, sign out, and user settings options.Image illustrating through labels the parts of a header on mobile, including its home branding and icon, optional tabs such as modes, workspaces, local links, and top nav, overflow menu with actions, search, and document name, and optional avatar with sign in, sign out, and user settings options.

Components#

Two examples of header containers, one on a dark-colored background and one on a light-colored background. Shown in blueprint style rectangles.

Container#

A header container can be 48, 56, 64, or 72 px tall. It can be a UI theme agnostic from the page’s theme.

Two examples of dividers, of equal width, one slightly darker than the other.

Dividers#

On desktop, headers use a page-theme medium divider below the header. For example, if your header is lightest theme and your page is light theme, use a light theme medium divider to separate the header from the page. On mobile web, headers use a page-theme small divider.

Two examples of a header’s branding and home elements. First example, A text label reading Photoshop with a yellow circular icon reading FPO to signify that the header is a mock or not final. Second example, a home icon, in the form of an action button, no text label.

Branding and home#

Your header can have either branding or a home icon (in the form of an action button) on the left side of the header.

Example of tabs in a header. Four tabs, labels Home, Your files, Shared with you, Libraries. The Home tab is selected.

Tabs#

Whether or not your header needs workspaces, modes, or a top level nav, you can use tabs that are positioned to the right of the home icon or branding.

Example of a document name. A paper or document icon is beside the PDF document name of 20180197_Proposal.pdf. A quiet picker shows that there are controls available for the document.

Document name#

If your header needs to show the document name, or have a control for switching between multiple documents, use either plain text or a quiet picker with an icon.

Two examples of search functionality in a header. First example, a magnifying glass icon. Second example, a search bar consisting of a magnifying glass icon, label, Search, and an icon-only action button to clear any search terms.

Search#

You can include search functionality in your header.

Example of a top-level button with placeholder label text, reading Action.

Button#

If there is a top level action that applies to any page in your product, you can put one button in your header between search and actions. Because the placement and persistence of the button gives it extra visibility, we recommend using a primary button here, though a CTA button is permissible.

Three examples of icon-only action buttons. No text labels. The actions are share, add reviewer, and settings.

Action Buttons#

Headers are required to have product-wide or global action buttons. Actions can be divided by a small divider. Actions like sharing, inviting, and managing settings appear here.

Example of a generic or non-photo avatar, green color.

Avatar#

User settings including avatar preview, language settings, location, and the ability to sign up or sign in should be included under the avatar.

The maximize UI control icon-only action button, which shows two arrows pointing in opposite directions, aligned on a diagonal.

Maximize control#

The maximize UI control is an action button that appears to the furthest left side of the header and includes a small divider.

Behaviors#

Key example showing behavior of tabs in a mobile header. Includes logo, collapsed view of menu label Home, overflow menu, and avatar.

Tabs#

Tabs truncate down to the overflow pattern when the viewport is small.

Key example showing behavior of search icon in a header. Standalone Search icon expands to full field, prompt label Search and dismiss icon.

Search#

Clicking on the search icon will expand it out to a full search field. If tabs or document name are present, these disappear to make room for the search field.

If there are no tabs or document name, keep the search field expanded in the center of the header by default.

Key example showing behavior of collapsing action buttons in a header. Icons of actions Forward, Backward, Help, Add reviewer, Share collapse to one tool, label Back.

Collapsing Action Buttons#

Action button groups can be divided by small dividers. Place global/more permanent actions on the right side, and transient/contextual actions on the left. Actions can collapse down to a tool with hold affordance.

Key example showing behavior of column grid in a header. 12 columns adapt to the viewport depending on if the grid is fixed or fluid.

Responsive column grid#

If your page is using a 12 column fluid grid, the components inside the header should line up to the columns, respecting the outer gutters. In this example, the gutters are 32 px wide so the header content is inset 32 px as well.

If your page is using a 12 column fixed grid, the content is a max width of 1280 px. In this case, the content inside the header would also have a fixed width and line up to the columns.

Note that with a small viewport, you should switch to using mobile-scaled components.

Key example showing behavior of header responsiveness. 4 different headers with the same content hide components as the width gets smaller.

Responsiveness#

Responsiveness will depend on the use case, and it should be decided which components are more important than others. If, for example, the button is more important than the document name, then the button could stay and the document name be removed instead.

The individual components in the header would collapse according to their behavior guidelines. Tabs would collapse down to the tab overflow style. Action buttons collapse down to a “more actions” icon button, and could include the search functionality on small screens.

Make sure that if you remove items from the header, you do not remove them completely. Retain the functionality by collapsing into the more actions menu.

Key example showing behavior of maximize control icon. Icons of actions Forward, Backward, Help, Add reviewer, Share separated by divider from Maximize icon.

Maximize control#

If your use case has the need for a maximize UI control, place the maximize icon to the furthest right of the header, with a small divider to separate it from the rest of the items.

Key example showing behavior of header sticking to the top of a view.

Stickiness#

The header should always be sticky on the page. It should not be able to be scrolled out of sight.

Platform considerations#

Web#

Browser-based applications must account for UI that are handled by the OS elsewhere. Web app headers should include clear branding and access to help, notifications, and user settings. Web headers should use the "header" element in HTML 5 and the "banner" landmark role.

MacOS#

The “traffic lights” in MacOS that are used to close/minimize/maximize the window are positioned at the far left of the header. They should be vertically centered in the header. Branding should not be present in the header bar on MacOS unless the product name is shown. Dividers below the header should be medium thickness (2 px). The product name is not shown when the document/project name and/or switcher is used. Note that the application name is aways shown in the MacOS menu bar immediately to the right of the Apple menu. Learn more about MacOS window anatomy.

UWP and Windows#

The minimize/maximize/close buttons are always displayed on the far right of the header. The application icon is always displayed on the far left of the header bar, and this representation takes the place of a spelled-out product name. The app icon is immediately followed by the application menu items. Learn more about Windows’ page layout.

iOS#

Use the iOS header with a few changes. Change the font to Adobe Clean, and change the colors to match Spectrum. Tabs can become sections in an iOS tab bar at the bottom (skinned with Adobe Clean). Branding should not be present. Home icon functionality and search could collapse with the other actions into a more actions menu.

Android#

Use the Android header with a few changes. Change the font to Adobe Clean, change the colors to match Spectrum. Tabs can be either be tabs at the top, below the header, or an Android bottom navigation bar (skinned with Adobe Clean). Branding should not be present. Action buttons would collapse down to a hidden actions menu. Search can either be hidden in the hidden actions menu or stay exposed. Do not add a drop shadow to the Android header.

#

Usage guidelines#

Don't change component placement#

Although most pieces of the header are optional, do not change the placement of the components if they are included in your header.

dont
Key example showing incorrect usage of header. Header component placement re-arranged to show branding in middle and actions at left.

Search product-wide#

Search fields in the header should search product-wide, not search across products.

If your product has no tabs or document name, keep the search field open rather than collapsing it down to an icon.

do
Key example showing correct usage of header search field. Search field with Search icon, placeholder text label Search, and dismiss icon.

Show branding or home icon#

Every product should either have a home icon or branding. It should not have both. If there are no tabs, and you have a brand mark, you can include the product name to the right of the mark.

do
Key example showing correct usage of header home icon or branding in three ways. Home icon with two tabs, labels Design and Prototype. Sample brand icon with two tabs, labels Home and Your files. Sample brand icon with application name, no tabs.
dont
Key example showing incorrect usage of header home icon or branding in two ways. Sample brand icon with home icon and two tabs, labels Design and Prototype. Sample brand icon with application name, two tabs labels Home and Learn.

Use different color themes when necessary#

The header bar can be a different theme than the rest of the page, but should be the same or darker than the UI on the page. You should not use a light UI header with a dark UI page.

If you are using a dark UI header with a light or lightest UI page, you do not need to include a divider between the header and page.

dont
Key example showing incorrect usage of header color theme. Light UI header paired with dark UI on rest of page.

Keyboard interactions#

Components have their own defined keyboard interactions. For more information regarding component-level interactions, visit the component pages.

KeyInteractionCtrl + F8Bring the first item inside the header container into focusTabMove from component to component from left to right in LTR languages, and from right to left in RTL languages

Changelog#

DateNumberNotesApr 06, 20222.0.0
  • Updated all colors to 6.0.0
Jun 12, 20191.0.0
  • This pattern has been added to the website