Description

The shell bar is seen at the top of every product screen and contain features that impact the entire user landscape. Together with the side navigation bar, this component makes up the application shell and is also a key component of the modules framework.

Usage

Because the shell bar contains key information and functionality to the user's experience with a product, such as navigation and user settings, hide, obscure, or remove the shell bar from view.

• Provide context of the product, module tool, and the file in session through its breadcrumb.
• Navigate from an application page all the way back to Home.
• Manage file drafts and open saved files in other module tools.
• Access global features such as search, notifications, user settings, and more.

Anatomy

The shell bar is divided into two different groups: the left side give context to the product, tooling area, and file in session; the right side contains global search, collaboration, user settings, and a product switcher (if applicable). They key part of the shell include:

• Back Navigation button – When an module tool is launched, the back button navigates back to previously visited screens, such as the module's start page or the product's Home screen .
• Product Application brand – Click to navigate immediately to the Home screen.
• Title or Tool Name – Indicates the name of the module tool currently active. See Side Navigation for module tools.
• File Name and Breadcrumbs – Displays the name of the current file in session. Click the downward arrow to see a breadcrumb of where the file is presently located.
• File Actions – Display file actions, usually Jump off Navigation and a Close button. Jump off Navigation allows the user to move or create a new file in another application or tool from the top shell bar. The close button closes the file in view.
• Global Search – Use for searching items across the entire application.
• Notifications – Notify users of updates or requests from the system or other users. See Notifications.
• Collaboration – Access all chat conversations with other users.
• Help – Opens the Help panel. Information displayed may be contextualized and task-oriented to help users complete their current task.
• Profile – Access user profile and other settings and services.
• Product Switcher – Switch between different product applications.

Behaviour & Interactions

Contextualized position in the system

The appearance and features provided in the left side of the shell bar change when launching a module tool. For example, the title area displays while in the screen, but shows the name of the module tool, such as when launched.

When a file is opened, the shell bar also displays the file currently in session, as well as additional actions that can be take on the file itself. The right side of the bar show permanent features that need to be available always.

Breadcrumbs

In the shell bar, there are two different types of breadcrumbs: module breadcrumbs and file repository breadcrumbs.

Shell Bar Actions

The shell bar offers many different interactions and actions, which can depend on the current file. Different files can have more actions than others. There are three types of shell bar actions: jump off navigation, file actions and global actions.

Different file actions can appear on the shell bar and depend on the current file. These file actions are placed immediately after the file name.