Edit in GitHubLog an issue

Interface: TopbarAPIProperties

Hierarchy

  • TopbarAPIProperties

    TopbarAPI

Properties

customEnvLabel

customEnvLabel: string

Gets or sets a custom environment label in the shell.

Example:

Copied to your clipboard
topbar.customEnvLabel = 'Beta';

solution

solution: Solution

Configuration for solution name and hero.

Example:

Copied to your clipboard
topbar.solution = {
icon: 'AdobeExperienceCloud',
title: 'Adobe Experience Cloud22',
shortTitle: 'AEC'
};

workspaces

workspaces: WorkspaceMenu[]

Configuration for the Shell workspaces. Workspace names should be unique, and should be localized using the unified-shell locale prior to setting runtime.workspaces.

Copied to your clipboard
topbar.workspaces = [
{name: 'Home', url: '/'},
{name: 'ABC', url: '/abc'},
{name: 'DEF', url: '/def'}
];

Unified shell also supports workspace flyout menus, where clicking on a workspace displays a dropdown menu. The top-level workspace is present in the dropdown menu as the first menu item. Menus may be nested multiple times, and used in combination with normal workspaces. By default, parent menu items are automatically added to the sub-menu because of the way the user interaction works. To prevent this, remove the url property on the parent item; it will then not be injected into the sub-menu.

Copied to your clipboard
topbar.workspaces = [
{name: 'Home', url: '/'},
{name: 'ABC', url: '/abc'},
{
name: 'DEF',
url: '/def',
menu: [
{
name: 'GHI',
url: '/def/ghi',
menu: [
{name: 'JKL', url: '/def/ghi/jkl'}
]
}
]
}
];

Next steps

Explore details of the Index, Page, TopBar, and User external modules.

Explore the attributes and behavior of Adobe Experience Cloud Interfaces:

Modules

Runtime

PageTopbarUser

Return to the Guides Index.

  • Privacy
  • Terms of Use
  • Do not sell or share my personal information
  • AdChoices
Copyright © 2025 Adobe. All rights reserved.