Description

Description

The Application toolbar, or app bar, is found at the topmost area of an application page below the shell bar. As the most important design element in the app screen, it provides visual structure in a familiar form factor, help users understand how to interact with that app, and provides access to important actions in a predictable way.

Usage

Use the Application toolbar for file or document-based tools and apps. Or as an alternative to Fiori's Header Toolbar. That's because the app bar uses a classic File, Edit, and View configuration; whereas Fiori's header toolbar has a different structure not necessarily dependent on file creation.

…You are dealing with the creation, editing, or management of a file, document, object or equivalent artifact.
…You have a large group of commands and features that exceed the capacity of Fiori Header toolbar.
…Your app doesn’t have enough commands to at least need the File, Edit, and View menus. Use Fiori’s Header toolbar instead.

Anatomy

Menu Bar, required; 3 or more menus
Toolbar, optional; used for important actions that need to stand out from the Menu bar
Separator, required; separates the Menu bar from the toolbar. Additional separators are optional.

The Menu bar is a group of menus (sap.m.MenuButton) offering a list of actions, commands, tools, and features a user can choose from at any time. In addition to the required menus, the Menu bar may also contain optional menus, including custom-made app-specific menus.

<div> <div>Menu</div> <div></div> <div>Description</div> </div> <div> <div>File</div> <div>required</div> <div>For file level actions or functions related to document set up</div> </div> <div> <div>Edit</div> <div>required</div> <div>For actions that facilitate editing file content or the selection</div> </div> <div> <div>View</div> <div>required</div> <div>For showing/hiding components from view and customizing the display</div> </div> <div> <div>Insert</div> <div>optional</div> <div>For adding content into the file or document</div> </div> <div> <div>Data</div> <div>optional</div> <div>For all data-related functions</div> </div> <div> <div>Tools</div> <div>optional</div> <div>For miscellaneous functions or commands</div> </div> <div> <div>Custom menus</div> <div>optional</div> <div>For adding custom app-specific menus additional to the ones above</div> </div>

To learn more about what goes inside each menu, please see Menu Bar Organization section of this article.

The Toolbar contains actions divided into two groups: on the left, actions called out from the Menu bar, and on the right, important page-level actions – use of either or both is optional. The following list contains all controls approved for the app bar:

Button (sap.m.Button)
Segmented button (sap.m.SegmentedButton)
Toggle button (sap.m.ToggleButton)
Menu button (sap.m.MenuButton)
Search field (sap.m.SearchField)
Select (sap.m.Select)
Switch (sap.m.Switch)

To learn about toolbar organization, please refer to the Toolbar Organization section in this article.

false

Use any of the approved Fiori controls above when constructing a Toolbar.

dont

false

Use custom components or interactions in the Toolbar. The Toolbar is not the place to dazzle users with new, experimental or unfamiliar components, patterns, behaviours, and interactions.

Below is a list of the most common menus in the application toolbar and their corresponding items in their suggested order. Additional items may be placed inside any menu whenever it matches its criteria. If a new menu is needed, then please see tips on how to make a at the end of this section

The File Menu shows all actions for handling the file or document currently in session. This includes all high-level actions that treat the file itself as an object, such as saving, renaming, sharing, or exporting it. It also contains properties, preferences, and configurations that perform document setup functions.

Non-file or document-based apps can rename this menu when needed, such as the SAC Calendar app, which doesn’t create any document files but needs some of the items typically found in the File menu. So instead, it calls this menu ‘General’.

guideline

File vs. GeneralIf an app creates a file, document, or equivalent artifact that is saved in the file repository (or equivalent) for later use or consumption, please call this menu File. If not, you may use another label, like General, or use Fiori's Header Toolbar instead.

The File menu occupies the in the menu bar, and contains the items below, if applicable, arranged by importance according to the workflow. Additional items may be added whenever they fit this criteria.

<div> <div>Menu Item</div> <div>Function</div> <div>Shortcut (If Applicable)</div> </div> <div> <div>New</div> <div>Starts a new file, document, or equivalent artifact in the current app.</div> <div> <p>Ctrl+N</p> <p>Command+N</p> </div> </div> <div> <div>Open / Open Recent</div> <div>Opens an existing or previously saved file or document from the current app</div> <div> <p>Ctrl-O</p> <p>Command-O</p> </div> </div> <div> <div>Save</div> <div>Saves the file in session in its current state</div> <div> <p>Ctrl + S</p> <p>Command + S</p> </div> </div> <div> <div>Save As...</div> <div>Saves the file in session in its current state under a different format, such as a template or different file types.</div> <div></div> </div> <div> <div>Duplicate File</div> <div> <p>Makes a duplicate of the current file in session.</p> <p>When a duplicate file is created, the user is taken to the duplicate copy and should have a clear method to navigate back to the original. This should allow the user to keep both original and duplicate copies of the file open until they are both explicitly renamed, saved, and closed by the user.</p> </div> <div></div> </div> <div> <div>Rename...</div> <div>Allows the file to be renamed after it has been previously named and saved.</div> <div>F2</div> </div> <div> <div>Move...</div> <div>Allows the file to be moved to a different saved folder location after it has been saved at least once.</div> <div></div> </div> <div> <div>Share</div> <div>Share the file system-wide or to specified users, teams, spaces, etc. Also used for sharing by email or URL.</div> <div></div> </div> <div> <div>Options...</div> <div>Opens a dialog to configure file options</div> <div></div> </div> <div> <div>Settings...</div> <div>Opens a dialog to configure file settings</div> <div></div> </div> <div> <div>Preferences...</div> <div>Opens a dialog to configure file preferences</div> <div></div> </div> <div> <div>Publish / Deploy</div> <div>Prepares file for deployment or publishing to a wider context, such as within a team folder or system wide.</div> <div></div> </div> <div> <div>Import File</div> <div>Prepares file for importing to a different context or location</div> <div></div> </div> <div> <div>Export</div> <div>Exports different files, documents, or equivalent artifact from a different source or location into the current file context.</div> <div>Shift-Command-E</div> </div> <div> <div>Print / Print Set Up</div> <div>Prepares file or document for print</div> <div> <p>Ctrl-P</p> <p>Command-P</p> </div> </div> <div> <div>Close File / Tab</div> <div>Closes the current file or document tab in the current app. If file contains unsaved changes, users should be prompted to save before closing.</div> <div> <p>Ctrl-W</p> <p>Command-W</p> </div> </div>

The Edit menu allow users to make changes and handle the content data of the file in session. This often refers to the data input by the user, whether that is text, image, video, or types of user input such as those in the Insert menu. Many of the Edit menu’s commands are related to the user’s clipboard, such as cut, copy, and paste. Undo and redo are also found in this menu because they relate to the actions found in the Edit menu.

In some cases, the Edit menu may also contain additional commands such as Find, Find & Replace, Transform Text (uppercase, lowercase, etc.), Emoji & Symbols (for special characters or glyphs), and other formatting options if a more appropriate menu (such as an app-specific Text or Format menu) is not in use.

The Edit menu occupies the in the menu bar, and contains the items below, if applicable, arranged by importance according to the workflow. Additional items may be added whenever they fit this criteria.

<div> <div>Menu Item</div> <div>Function</div> <div>Shortcut (If Applicable)</div> </div> <div> <div>Undo [action name]</div> <div>Reverses the effect of the last action taken</div> <div> <p>Ctrl-Z</p> <p>Command-Z</p> </div> </div> <div> <div>Redo [action name]</div> <div>Reverses the effect of the last Undo command</div> <div> <p>Shift-Ctrl-Z</p> <p>Shift-Command-Z</p> </div> </div> <div> <div>Cut</div> <div>Removes the selected data and adds it to the clipboard</div> <div> <p>Ctrl-X</p> <p>Command-X</p> </div> </div> <div> <div>Copy</div> <div>Adds a duplicate of the selected data into the clipboard</div> <div> <p>Ctrl-C</p> <p>Command-C</p> </div> </div> <div> <div>Paste</div> <div>Inserts the content in the clipboard into the selected place</div> <div> <p>Ctrl-V</p> <p>Command-V</p> </div> </div> <div> <div>Paste Special</div> <div>Inserts the content in the clipboard into the selected place with custom formatting</div> <div> <p>Shift-Ctrl-V</p> <p>Shift-Command-V</p> </div> </div> <div> <div>Delete / Delete All</div> <div>Deletes the Selection</div> <div> <p>Ctrl-D</p> <p>Command-D / Delete</p> </div> </div> <div> <div>Duplicate [Object]</div> <div>Duplicates the selected object, page, or layer. When duplicating large entities, such as layers, tabs, or pages, ensure this is indicated in the label of the menu item.</div> <div></div> </div> <div> <div> <p>Select All</p> <p>Select All [X]</p> </div> <div>Selects all text, files, or other object data currently on display. When selecting large entities, such as layers, tabs, or pages, ensure this is indicated in the label of the menu items.</div> <div> <p>Ctrl-A</p> <p>Command-A</p> </div> </div> <div> <div>Transform Text</div> <div>Displays sub menu with options to alter selected text, such as bold, italic, uppercase, lowercase, capitalization, etc.</div> <div></div> </div>

The View menu controls what users see on display and allows them to customize its appearance, including any and items turned on or off by default. Use the View menu for toggling components on or off from View, triggering different view modes, and changing zoom or different magnifying levels of the content or screen.

The View menu occupies the in the menu bar, and contains the items below, if applicable, arranged by importance according to the workflow. Additional items may be added whenever they fit this criteria.

For information on how to toggle menu items from view, such as in Show and Hide scenarios, please see section in Behaviors and Interactions below.

<div> <div>Menu Item</div> <div>Description</div> </div> <div> <div>Show / Hide Toolbar</div> <div>Toggles classic application toolbar from view.</div> </div> <div> <div>Show / Hide Tab Bar</div> <div>Toggles tab bar from view.</div> </div> <div> <div>Show / Hide Filter Bar</div> <div>Toggles filter bar from view.</div> </div> <div> <div>Show / Hide Formula / Text / Transformation Bar</div> <div>Toggles formula, text, or data transformation bar from view.</div> </div> <div> <div>Card / Table / List view switcher</div> <div>Switches between different card, table, or list views. Find more information on <a href="https%3A%2F%2Fwww.sap.com%2Fr%2FxZm_EX7SLcf_fC_OifjjltyIpsn28wowY125-uhl_4A">Views</a>.</div> </div> <div> <div>Show / Hide [Side Panel Name]</div> <div> <p>Toggles side panels or object list panels from view. Does not apply to task panels.</p> <p>Note: task panels should not open from the View menu since they represent contextual tools or tasks, they are not meant to stay permanently open, and they have a footer to close them. Instead, they should open from different buttons or actions in a menu (if using) or from the content itself.</p> </div> </div> <div> <div>Show / Hide [Split Panes]</div> <div>Toggles panes, such as in Stories, from view.</div> </div> <div> <div>Show / Hide Comments</div> <div>Toggles previously added user comments from view.</div> </div> <div> <div>Show / Hide Ruler / Grid / Guides</div> <div>Toggles rulers, grids, or any type of visual guides from view.</div> </div> <div> <div>Show / Hide Viewfinder</div> <div>Toggles viewfinder component window from view.</div> </div> <div> <div>Zoom</div> <div>Opens a sub menu with options to zoom in and out, fit to screen, center on screen, actual size, or change the magnifying level (based on % values).</div> </div> <div> <div>Preview / Device Preview</div> <div>Enter and exit any type ‘preview’ mode, such as in Stories.</div> </div> <div> <div>Enter Full Screen</div> <div>Enters and exit full screen mode.</div> </div>

Using the View menu to show and hide components

The Insert menu is used for adding or creating items to the file in session. This includes any object, element, widget, or entity that make up the file. As such, the items in this menu will depend on the workflow it's meant to support.

Because the name/label of the menu already suggests the action of inserting / adding / creating, there is no need for an additional verb next to the item that will be added. For example, use the label ‘Chart’ instead of ‘Add Chart’.

Use of the Insert menu is optional; however, if using the Insert menu, it occupies the in the menu bar. Examples of items in the Insert menu include the items below arranged by priority according to the workflow.

<div> <div>Example of items belonging to this menu</div> </div> <div> <div> <ul> <li>Chart, table, input controls</li> <li>Text, title, subtitle, header, footer</li> <li>Dimension, column</li> <li>Events</li> <li>Input task</li> <li>Process step</li> <li>Agenda topic</li> <li>Image, shape, line</li> <li>Map, graph, node</li> <li>Feed, hyperlink</li> <li>Widget, card, tile, layer</li> <li>Tab, page, sheet, slide</li> <li>Comments, notes</li> <li>Templates</li> </ul> </div> </div>

The Data menu is used for managing all functions, commands, and attributes related to the data feeding into the file, whether that has a material representation on screen or is a connected source behind the scenes.

If a table floorplan is being used, the Data menu may also support table functions such as sorting or showing/hiding columns. However, consider in such cases whether an app-specific menu might be more suitable to house all table-specific actions. If a table component is being used instead, then table specific commands should appear in the table’s own toolbar, not in the Data menu.

Use of the Data menu is optional; however, if using the Data menu, it occupies the in the menu bar. Examples of items included in the Data menu include the items below arranged by priority according to the workflow.

<div> <div>Examples of items belonging to this menu</div> </div> <div> <div> <ul> <li>Connect (to source) / Import / Upload</li> <li>Copy / Duplicate Data</li> <li>Filter / Advance Filter</li> <li>Parameters</li> <li>Blending</li> <li>Refresh / Refresh Schedule</li> <li>Validate</li> <li>Lock</li> <li>Remove / Clear / Erase Data (not to be confused with ‘Delete’ which is often done by pressing the ‘delete’ key / keyboard shortcut and is found in the Edit menu)</li> <li>Transformations (sub menu: Split, Concatenate, Replace, Extract, Trim, Text Case, etc.)</li> <li>Actions (sub menu: Geo Enrichment, Hierarchy, Combine, Pivot Table, etc.)</li> <li>Import Options / Settings / Configuration</li> <li>Export Data</li> </ul> </div> </div>

The Tools menu includes a list of all additional utility commands or actions that don’t have a more appropriate menu for them. This usually includes tools that require another component to carry out the desired function, such as a dialog box or a task panel.

Use of the Tools menu is optional; however, if using the Tools menu, it occupies the in the menu bar.

When designing a Tools menu, keep the following items in mind:

The name of a Tool should be clear and simple using as few words as possible. One or two-word labels are best: a verb (the action) followed by a noun (the subject matter). If the label of the tool is longer than this, then it is an indication that the tool might not be simple enough or is too specific.
Always use an ellipsis to indicate when menu items require additional user input beyond the tools menu, such as in a Dialog box or a Task panel. This familiar pattern is an established industry standard.
Anything can be a tool, but it doesn’t need to go in the Tools menu if a more appropriate menu for it already exists. In some cases, and especially when a tool has more than one single function, the same tool may be referenced in a different menu and the Tools menu at the same time. This essentially creates different but valid entry points to the same tool. In these situations, maintain continuity by persisting previously made selections and configurations so users understand they are looking at the same tool again.

Custom Menus

Additional menus, unique to individual apps, may be added to the Menu bar when needed. Sometimes, app-specific menus are a result of breaking up other required or optional menus when those run too long. For example, adding all table actions under a custom made menu instead of cluttering the menu.

All custom app-specific menus should be placed after the Tools menu and arranged by order of most important. When introducing them to the App Bar, consider the following:

Coordinate menus with user tasks
Pay special attention to the order of menus and the items within them, as their order and position is usually a clue of how to approach the sequence of a workflow, especially when a user is encountering it for the first time. Place the most important items, or group of items, closer to the top of the menu.
Use intuitive labels
Understand that menus are not the place to get creative with made-up words or internal jargon. Instead, figure out what users are looking for and stick to familiar or expected terminology expected by them. Ideally, an app-specific menu should speak for itself.

Use of any custom app-specific menu is purely optional; however, if using any, they should be listed in the and beyond.

Called-out Actions

The left side of the Toolbar is reserved for actions from the Menu bar that need to be called out for a some reason. There are many benefits that come from calling out an action, such as making them more accessible, more visible, for highlighting key functionality, and for making the workflow more focused. But this means that actions that are called out will have two access points in the App Toolbar: one in the Menu bar and one in the Toolbar.

Think carefully what actions need to be called out. Consider that when the App toolbar is expanded (see Behaviours and Interactions), these actions will no longer be in the spotlight and will only be found inside their respective menus. Not every actions needs to be called out, and calling out actions at all is purely optional. But when doing so, follow the criteria below:

Actions that need to be accessed repeatedly. For example, Undo and Redo.
Actions that manipulate the content on display but not the UI layout, such as Search, Sort, and Filter.
Actions that are part of a general framework instead of a specific workflow, such as Flag, Favourite, Bookmark, Share, Export, etc.

Before calling out actions in the Toolbar, check out the Menu Organization section above and see what menu it belongs to, or where similar actions can be found. Ask if calling these out and adding a second access point is justified. Remember that the goal is not to simply decorate the App toolbar with Buttons simply because the space is available, but actually, to stay organized and focused.

false

Call out key actions from the Menu bar to make them accessible directly from the Toolbar.

dont

false

Place actions in the Toolbar that don't have a place in the Menu bar. When the App Toolbar is expanded, all called-out actions will need to fit in a menu.

Called-out actions appearing in their respective menus when the App Toolbar is expanded

Page Actions

Page actions are high-level actions that impact the entire page. They reflect the user’s goals, priorities, and other important high-level actions. In that sense, they are kind of like the actions found in a Footer bar. But the difference is that page actions on the App toolbar act on the page, while page actions on the Footer bar transition of the page and provide cancelling actions.

Trigger changes of state at the page level. Example: changing a Story from View to Edit, or, entering and exiting a Preview or Fullscreen mode.
Execute a high-stakes function while staying in-place. Example: running an Analytic Application or Smart Discovery, playing a Digital Boardroom presentation and/or accessing the agenda, and Validating the object’s connected data source(s) in data-related apps.
Exit the current context. Example: The Exit button in the OEM query builder or Search to Insights.

Page actions can also reflect generic actions closely tied to actions from the Menu bar, but that are the focus of the workflow. For example, if the page workflow is about creating and publishing an object, the page action could be . In that scenario, it wouldn’t be wrong to have Publish appear both in the File menu and in the Toolbar. This adds emphasis on the end goal and gives the user a sense of direction. The same is true for other generic actions like Save, Share, or Export.

Page actions appear in the far right-side of the toolbar, and should be enabled throughout the user's workflow. If there are no suitable page-level actions, this section of the toolbar may be left blank.

warning

What is not a page action?Opening and closing side panels / UI components, and switching View modes; these items belong in the View menu. Navigation items to another page or app belong in the Footer toolbar or side navigation.

false

Use page actions that reflect user’s goal, priority, or other important actions for that page or app.

dont

false

Use page actions that opening components that should be in the View menu instead.

Within the toolbar, certain actions are more important than others. Different button styles are designed to give appropriate feedback to users. Don’t use them on a whim or for decorative purposes. Ensure the focus is on the right actions by using the most suitable style for the action and arrange them by order of most important.

<div> <div>Button Styles</div> </div> <div> <div> <ul> <li><em>Emphasis button:</em> Used for the most important action in the entire UI, typically a page action. If a Footer bar is present, reserve the Emphasis button for the Footer bar instead of the App toolbar. Avoid more than one Emphasis button at the same time.</li> <li><em>Ghost button:</em> Used for all standard page actions that are not emphasized or generic.</li> <li><em>Transparent button:</em> Use for all called-out actions and generic page actions.</li> </ul> </div> </div> <div> <div> <ul> <li><em>Text buttons:</em> Preferred by most users for being less ambiguous than icon buttons. Prioritize text buttons over icon buttons whenever and wherever possible.</li> <li><em>Icon buttons:</em> Most suitable for actions that can be immediately recognized when presented only as an icon. Always ensure a <a href="https%3A%2F%2Fexperience.sap.com%2Ffiori-design-web%2Fusing-tooltips%2F">tooltip</a> contains the name of the action and any additional important information, like a shortcut. Be brief!</li> </ul> </div> </div>

Research has shown that people cannot remember the meaning of more than a small number of icons. More often than not, users remember the location of actions in the UI instead of the meaning or recognition of icons. When in doubt, the best icon is a text label.
Remember that some buttons that present as icon buttons in some contexts are more suitable as text buttons in others. For page actions, always use text buttons.
Don't assume users need to see a hard-to-recognize icon button many times before they learn the meaning behind it. It is better to use a text button for any key, unique, or infrequently used action from the get-go than to punish users into relying on memory, repetition, or glyph recognition alone.

For more information on action and button types, please refer to Action Placement in Fiori guidelines or SAP’s UX Consistency Standards (UXC-014).

false

Place emphasis on a page action either on the toolbar or the footer bar.

dont

false

Use more than one emphasis button per page.

Behaviours & Interactions

Expand Application Bar

The App toolbar may expand to display as the classic Toolbar. The action for this transition should be placed in the View menu as “Show/Hide Toolbar.” It is recommended the application bar is collapsed by default.

When this transition happens, menus should retain their placement and position, but their individual tools may be reordered if needed to ensure the more important tools are not hidden under an overflow menu.

Show / Hide toolbar is placed under the View menu

Overflow Behaviour

Ensure some level of responsiveness by using overflow with intention. Overflow should be activated either when there is not enough space for all actions, or if some actions are less important than others.

All buttons go into the overflow from right to the left. This ensures that the most important buttons are the last to be moved into the overflow menu. The separator line (sap.m.ToolbarSeparator) can also go into the overflow, changing from a vertical line into a horizontal line in the menu. If the control happens to be the first or the last item of the overflow area, the separator shouldn’t be displayed.

Teams made up of designer and developer can decide together what to prioritize and which actions will go into overflow by applying one of five priority statuses below:

<div> <div>Priority Status</div> <div>Description</div> </div> <div> <div>Always overflow</div> <div>The action always goes into the overflow regardless of screen space.</div> </div> <div> <div>Disappear</div> <div>The action that is not so relevant for the user can disappear if the space is limited (for example, a minor tool).</div> </div> <div> <div>Low</div> <div>Assign the priority “Low” to an action if the user seldom needs it; this action will overflow first.</div> </div> <div> <div>High</div> <div>Actions set to “High” remain visible in the toolbar until all lower-priority actions have moved to the overflow. Lower-priority actions are those with the priorities “Disappear” or “Low”, and all non-prioritized actions.</div> </div> <div> <div>Never overflow</div> <div>These actions are always visible in the toolbar.</div> </div>

Toggle between two altering states in a menu can be challenging because the menu item itself may prove ambiguous to users. They may struggle to understand the current state of the menu, and what effect will be triggered when clicking on an item.

Since not all toggling menu item styles work for all situations, consider the styles below. Different styles may be combined in one single menu if needed (for example, the menu and submenu use different toggling actions).

Menu with dynamic labels

Dynamically changing labels simultaneously represent the action that will take effect on click, and the current state of the UI. For example, Show Toolbar becomes Hide Toolbar when the toolbar is on display. This style is compatible with icons and larger menus.

Use it to show and hide components from display.

Menu with checkmarks

Checkmarks are used to suggest the checked item is currently taking effect on the screen or selection. This style is not compatible with menu items that contain icons of their own, as this makes it harder to quickly scan the menu and understand which item is currently in effect.

Use it to apply effects, select filter or sorting category, and show/hide.

Menu with opposing toggles

Sometimes the best way to make sure opposing actions are totally unambiguous is by providing an individual menu action for each one. This style is most compatible with shorter menus or shorter menu groups, as it can easily double up the count of menu items.

Use it for actions that directly oppose each other but don’t work in the previous styles.

Native Component Behaviours

The App toolbar should be made up of existing and approved Fiori components. As such, honour the native behaviours and interactions of these components and avoid adding customized ones. Consider how the learnability of the App toolbar depends on it consistently behaving in the same way across all different apps that support it.

Buttons in all its variations, Dropdowns, Search and Input fields, Switches, Checkboxes and Radio buttons should have the same behaviours that they would have if they were placed in a different component.

When a menu is opened, it should remain open until a menu item is selected; or, until the user clicks outside the menu, clicks on a different menu, switches to another app, or until system message is displayed in a message box.

false

Add approved and established components from the list of approved Fiori controls for the App toolbar.

dont

false

Add custom controls and new patterns of interaction to the components in the App toolbar.

Best Practices

Keep it neat and tidy

Keep the Application bar neatly organized in a logical way. Ensure the proper method of user input (UI control) and the right button style is selected for the right type of action.

Remember that the larger a menu becomes, the more daunting and intimidating it appears to the user. To organize a menu, place the most important actions at the top, visibly group related items by using separator lines, reduce the number of icons where possible, and use simple and intuitive menu labels. If displaying keyboard shortcuts, ensure those are aligned on the right side of the menu.

To reduce the overall number of listed menu items, consider using sub menus, the proper menu toggling pattern, and creating app-specific menus that can reduce the load of another menu. For example, adding all table actions under a custom app-specific Table menu instead of adding them all to the Data menu.

Use sub menus responsibly

Where it makes sense to do so, consolidate related items under sub menus with a unifying theme or idea. Sub menus should be used instead of creating sub sections or indenting menu items. A proper sub menu should have anywhere between 6 to 8 items; if additional ones are required, consider placing them under a custom app-specific menu instead.

A good indication of needing a sub menu is when a term is used more than twice in a menu. For example, instead of individual menu items for Sort by Name, Sort by Date, Sort by Type, use a Sort By menu item with a sub menu for nested options for Date, Name, and Type.

To indicate a sub menu, use a right-pointed arrow icon, and open the sub menu automatically on hover of the entire parent menu item. Keep sub menus enabled always, even if their nested items are disabled. Avoid adding more than sub level, as this buries functionality and makes it cumbersome to find again.

false

Use sub menus for related actions under the same unifying theme or idea.

dont

false

Create custom groups inside a menu using subheadings or indented items

Be smart about disabling content

It is important users can browse the contents of an application bar and learn the placement of actions, even if those actions cannot be triggered at that very moment. But avoid situations where the application bar will have all of its items always disabled. Essentially...

Enable all items in a global toolbar as much as possible, even if you have to use a toast message to communicate the action cannot be performed until the right condition is met.
Disable items currently unavailable but will be made available later.
Remove all items from workspaces, page modes, or user types that will never make use of them.

All the actions of the Edit menu are disabled because there is no page data to act on. But instead of hiding the menu altogether, it remains disabled until something is added to the canvas, and their effect become relevant.

Provide accelerators, improve efficiency

Keyboard shortcuts are used regularly by advanced users, and provide another level of accessibility support. But they should not be used carelessly.

Keyboard shortcuts need to be easy to learn and memorize and applied to functions that are repeatedly used for them to be effective accelerators. Follow a standard format for shortcuts and try to match the name of the function and their shortcut button whenever possible.

Don’t forget the ellipsis

Use an ellipsis (…) next to menu items that will trigger another component, such as opening a dialog box or task panel, for additional user input. This industry-standard convention signals to the user that the menu item itself will require additional user input outside of the menu before completing the selected action.

Specifications

warning

Please follow Fiori's standard specifications for menus, menu buttons, and all other action buttons. As specified by Fiori, the use of icons in a menu is optional and a mix of both icon and icon-less menu items may be used in the same menu design.

Application Bar

The default and collapsed form of the Application toolbar

<div> <div>Badge</div> <div>Component</div> <div>CSS</div> <div>Details</div> </div> <div> <div></div> <div></div> <div> <p>height: 2.5rem;</p> <p>width: 100%;</p> <p>background-color: --sapObjectHeader_Background;</p> <p>box-shadow: --sapContent_HeaderShadow;</p> <p>*Border line should not be used when a different bar or component is stacked directly beneath app bar.</p> </div> <div> <p>height: 40px;</p> <p>width: 100%;</p> <p>background-color: #FFFFFF;</p> <p>box-shadow: inset 0px -1px 0px 0px #D9D9D9, 0px 0px 4px 0px fade (#000000, 0.15);</p> <p>*Border line (inset) should not be used when a different bar or component is stacked directly beneath app bar.</p> </div> </div> <div> <div></div> <div></div> <div> <p>S: 1rem, M: 2rem, L: 2rem, XL: 3rem</p> <p>*Margin is sized dynamically according to space available. Please refer to <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2038567803">Content Container Padding</a> for more information.</p> </div> <div> <p>S: 16px, M: 32px, L: 32px, XL: 48px</p> <p>*Margin is sized dynamically according to space available. Please refer to <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2038567803">Content Container Padding</a> for more information.</p> </div> </div> <div> <div></div> <div></div> <div> <p>0.5rem;</p> <p>0.4375rem;</p> <p>*All components need to be vertically centered inside the app toolbar.</p> </div> <div> <p>8px;</p> <p>7px;</p> <p>* All components need to be vertically centered inside the app toolbar.</p> </div> </div> <div> <div></div> <div></div> <div> <p>width; 1px;</p> <p>height: 1.5rem;</p> <p>color: --sapToolbar_SeparatorColor;</p> </div> <div> <p>width: 1px;</p> <p>height: 2px;</p> <p>colour: #D9D9D9;</p> </div> </div> <div> <div></div> <div></div> <div> <p>The space between toolbar buttons and page actions can take up all remaining space available or be a fixed value.</p> <p>min-width: 4rem;</p> <p>Buttons and actions that can't fit with min-width spacer should go under overflow menus.</p> </div> <div> <p>The space between toolbar buttons and page actions can take up all remaining space or be a fixed value.</p> <p>min-width: 64px;</p> <p>Buttons and actions that can't fit with min-width spacer should go under overflow menus.</p> </div> </div> <div> <div></div> <div></div> <div> <p><a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Fentity%2Fsap.m.Button">sap.m.Button</a></p> <p><a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Fentity%2Fsap.m.SegmentedButton">sap.m.SegmentedButton</a></p> <p><a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Fentity%2Fsap.m.ToggleButton">sap.m.ToggleButton</a></p> <p><a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Fentity%2Fsap.m.MenuButton">sap.m.MenuButton</a></p> <p><a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Fentity%2Fsap.m.SearchField">sap.m.SearchField</a></p> <p><a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Fentity%2Fsap.m.Select">sap.m.Select</a></p> <p><a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Fentity%2Fsap.m.Switch">sap.m.Switch</a></p> </div> <div> <p><a href="https%3A%2F%2Fexperience.sap.com%2Ffiori-design-web%2Fbutton%2F">Button</a></p> <p><a href="https%3A%2F%2Fexperience.sap.com%2Ffiori-design-web%2Fbutton%2F">Segmented button</a></p> <p><a href="https%3A%2F%2Fexperience.sap.com%2Ffiori-design-web%2Fbutton%2F">Toggle button</a></p> <p><a href="https%3A%2F%2Fexperience.sap.com%2Ffiori-design-web%2Fbutton%2F">Menu button</a></p> <p><a href="https%3A%2F%2Fexperience.sap.com%2Ffiori-design-web%2Fsearch%2F">Search field</a></p> <p><a href="https%3A%2F%2Fexperience.sap.com%2Ffiori-design-web%2Fselect%2F">Select</a></p> <p><a href="https%3A%2F%2Fexperience.sap.com%2Ffiori-design-web%2Fswitch%2F">Switch</a></p> </div> </div>

The classic toolbar becomes the expanded version of the Application toolbar and is accessed from the View menu.

<div> <div>Badge</div> <div>Component</div> <div>CSS</div> <div>Details</div> </div> <div> <div></div> <div></div> <div> <p>width: 100%;</p> <p>height: 4rem;</p> <p>background-color: --sapObjectHeader_Background;</p> <p>box-shadow: --sapContent_HeaderShadow;</p> <p>*Border line (inset) should not be used when a different bar or component is stacked directly beneath app bar.</p> </div> <div> <p>width: 100%;</p> <p>height: 40px;</p> <p>background-color: #FFFFFF;</p> <p>box-shadow: inset 0px -1px 0px 0px #D9D9D9, 0px 0px 4px 0px fade (#000000, 0.15);</p> <p>*Border line (inset) should not be used when a different bar or component is stacked directly beneath app bar.</p> </div> </div> <div> <div></div> <div></div> <div> <p>S: 1rem, M: 2rem, L: 2rem, XL: 3rem</p> <p>*Margin is sized dynamically according to space available. Please refer to <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2038567803">Content Container Padding</a> for more information.</p> </div> <div> <p>S: 16px, M: 32px, L: 32px, XL: 48px</p> <p>*Margin is sized dynamically according to space available. Please refer to <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2038567803">Content Container Padding</a> for more information.</p> </div> </div> <div> <div></div> <div></div> <div> <p>font-family: --sapFontFamily;</p> <p>font-size: --sapFontSize;</p> <p>font-weight: normal;</p> <p>text-color: --sapList_TextColor;</p> <p>line-height: 1.25rem</p> <p>0.375rem;</p> <p>0.5rem;</p> <p>0.5rem;</p> </div> <div> <p>font-family: 72</p> <p>font-size: 14</p> <p>font-weight: regular</p> <p>text-color: #32363A</p> <p>line-height: 20pt</p> <p>6px;</p> <p>8px;</p> <p>6px</p> </div> </div> <div> <div></div> <div></div> <div> <p>width; 1px;</p> <p>height: 3.25rem;</p> <p>color: --sapToolbar_SeparatorColor;</p> </div> <div> <p>width: 1px;</p> <p>height: 52px;</p> <p>colour: #D9D9D9;</p> </div> </div> <div> <div></div> <div></div> <div> <p>The space between toolbar buttons and page actions can take up all remaining space available or be a fixed value.</p> <p>min-width: 4rem;</p> <p>Buttons and actions that can't fit with min-width spacer should go under overflow menus.</p> </div> <div> <p>The space between toolbar buttons and page actions can take up all remaining space or be a fixed value.</p> <p>min-width: 64px;</p> <p>Buttons and actions that can't fit with min-width spacer should go under overflow menus.</p> </div> </div> <div> <div></div> <div></div> <div> <p><a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Fentity%2Fsap.m.Button">sap.m.Button</a></p> <p><a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Fentity%2Fsap.m.SegmentedButton">sap.m.SegmentedButton</a></p> <p><a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Fentity%2Fsap.m.ToggleButton">sap.m.ToggleButton</a></p> <p><a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Fentity%2Fsap.m.MenuButton">sap.m.MenuButton</a></p> <p><a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Fentity%2Fsap.m.SearchField">sap.m.SearchField</a></p> <p><a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Fentity%2Fsap.m.Select">sap.m.Select</a></p> <p><a href="https%3A%2F%2Fsapui5.hana.ondemand.com%2F%23%2Fentity%2Fsap.m.Switch">sap.m.Switch</a></p> </div> <div> <p><a href="https%3A%2F%2Fexperience.sap.com%2Ffiori-design-web%2Fbutton%2F">Button</a></p> <p><a href="https%3A%2F%2Fexperience.sap.com%2Ffiori-design-web%2Fbutton%2F">Segmented button</a></p> <p><a href="https%3A%2F%2Fexperience.sap.com%2Ffiori-design-web%2Fbutton%2F">Toggle button</a></p> <p><a href="https%3A%2F%2Fexperience.sap.com%2Ffiori-design-web%2Fbutton%2F">Menu button</a></p> <p><a href="https%3A%2F%2Fexperience.sap.com%2Ffiori-design-web%2Fsearch%2F">Search field</a></p> <p><a href="https%3A%2F%2Fexperience.sap.com%2Ffiori-design-web%2Fselect%2F">Select</a></p> <p><a href="https%3A%2F%2Fexperience.sap.com%2Ffiori-design-web%2Fswitch%2F">Switch</a></p> </div> </div>

Links & Resources

Fiori Guidelines: Fiori Toolbar Overview
Core Visual Design Specs: Toolbar
Fiori Guidelines: none currently
Core Visual Design Specs: Menu (Fiori3)
DemoKit Sample: Menu
API Reference: sap.m.Menu

Support

If you have any questions or feedback about this page, please contact our team. For further information and questions in regards to the Design System, please visit the DNA Design SharePoint.

Description

Usage

Anatomy

Menu Bar

Menu Bar Organization

File Menu

Edit Menu

View Menu

Insert Menu

Data Menu