Service Portal / Widgets

Employee Center header

Allow users to quickly view and navigate the Employee Center portal

Overview

  • A11Y WCAG 2.1 AA

The Employee Center header provides consistent navigation and branding across the portal. It typically includes the organization's logo, global search functionality, user profile access, and links to key areas, ensuring employees can easily find resources and information.

Important

Unlike other widgets in the portal, you must add a header to your portal by configuring it in the Theme form. For more information on adding a header to a portal, see Add a header or footer to a portal.

ServiceNow Docs link
Employee Center header documentation

Configure the Employee Center header

Figma link
Employee Center header Figma widget

Employee Center Figma library

null

When to use

Use when you want to provide a centralized, easily accessible navigation point for employees to access their key functions like submitting requests, viewing their to-dos, accessing personal information, and navigating Topic Taxonomies

When not to use

Do not use for designs that need a lot of customization beyond the standard Employee Center layout, departmental portals with navigation structures that differ significantly from the standard, or scenarios where a simpler header with less functionality is preferred.

Usage

Use the Employee Center header widget when you want to provide a consistent, top-level navigation and identification element for the Employee Center portal. Use it to ensure users can easily navigate core sections and maintain brand consistency. Designers should prioritize clear information architecture, intuitive navigation, and visual alignment with the overall portal design. Keep the following suggestions in mind:

  • Clear navigation structure: Design a logical and intuitive navigation menu and topic taxonomies. Limit the number of primary navigation items to reduce overwhelming your users. Use dropdown menus or secondary navigation elements for deeper content structures where needed.
  • User profile and settings accessibility: Provide easy access to user profile information and settings. Ensure these elements are consistently placed and visually identifiable.
  • Search functionality integration: Integrate a prominent and easily accessible search bar. Design the search input and results to align with the overall portal design.
  • Informative contextual elements: Include relevant contextual elements, such as notifications or quick links, in the header. Design these elements to be visually distinct and easily understood.

Anatomy

The Employee Center header widget typically comprises the following components:

Header — desktop breakpoint

  1. Logo: Displays the organization's logo, linking to the Employee Center homepage.
  2. Search: An input field for users to search across the Employee Center content. While a large, prominent search bar is always available on the homepage, this search field is displayed in the header on all other interior pages for quick access to content.
  3. User’s items: A dedicated area, configured by the system administrator to display frequently accessed and personalized links, ensuring logged-in users see only the menu items relevant to their role and access, such as 'My tasks' opening the To-dos page and 'My requests' opening the My Requests page.
  4. More menu (optional): Contains additional user’s items.
  5. User profile: Displays the logged-in user's initials or their profile picture (if available). Upon interaction, it reveals a menu offering access to profile settings, account management options, and a clear logout function.
  6. Tours: Opens guided tours that demonstrate how to use a feature. For example, an administrator can create a task demo with callouts to demonstrate how to perform the task.
  1. Primary navigation: The main navigation menu providing access to the Topic Taxonomies and other resources within the Employee Center. Design should prioritize clear labeling, logical grouping, and responsive behavior across different screen sizes.
  2. Secondary navigation (contextual): A supplementary navigation element that provides quick access to support.

Mega menu — desktop breakpoint

  1. Mega menu: Facilitates easy navigation through the portal's content hierarchy. It dynamically renders topics and child topics as menu items based on the configured Employee Center taxonomy.
  2. Quick links (optional, within mega menu): An additional column within the mega menu for curated shortcuts. These links can direct users to frequently accessed pages, specific services, or external resources, supplementing the main taxonomy-driven navigation. Design considerations include clear labeling and logical grouping for optimal usability.

Header — mobile breakpoint

  1. Logo: Displays the organization's logo, linking to the Employee Center homepage.
  2. Mega menu (closed state): A three-line icon provides access to site navigation on smaller screens.
  3. Search: An input field for users to search across the Employee Center content. While a large, prominent search bar is always available on the homepage, this search field is displayed in the header on all other interior pages for quick access to content.

Mega menu — mobile breakpoint (open)

Header:

  1. Logo: Displays the organization's logo, linking back to the Employee Center homepage.
  2. Mega menu button (open state): A X icon enables users to close the mega menu.
  3. Search: An input field for users to search across the Employee Center content. While a large, prominent search bar is always available on the homepage, this search field is displayed in the header on all other interior pages for quick access to content.

Navigation:

  1. Mega menu: Facilitates easy navigation through the portal's content hierarchy. It dynamically renders topics and child topics as menu items based on the configured Employee Center taxonomy.
  2. User’s items: A dedicated area, configured by the system administrator to display frequently accessed and personalized links, ensuring logged-in users see only the menu items relevant to their role and access, such as 'My tasks' opening the To-dos page and 'My requests' opening the My Requests page.
  3. Tours: Opens guided tours that demonstrate how to use a feature. For example, an administrator can create a task demo with callouts to demonstrate how to perform the task.

Profile:

  1. User profile: Displays the logged-in user’s name and profile picture (if available) as well as any additional links such as: profile settings, account management options, and a clear logout function.

Instance options

There are no instance options for this widget. You can configure the Employee Center header in the theme.

Usability

The Employee Center header complies with all internationalization and accessibility requirements.

Internationalization

Accessibility

Learn how to access the actionable elements of the Employee Center header through keyboard interactions and screen readers. 

Employee Center header tab order

Keyboard interactions

You can access the actionable elements of the Employee Center header with these keyboard interactions:

  • Tab: Navigates between header components (logo, navigation items, search bar, user profile, notifications).
  • Enter/spacebar: Activates a selected header component (navigation item, search, profile option); including opening or closing the hamburger menu.
  • Escape: Closes the user profile dropdown or search suggestions.