The code editor toolbar enables the user to trigger an action that impact the whole editor (e.g., undo) or change its view settings (e.g., preview resolution). It can also contain breadcrumbs. It appears always at the top  of the editor and does not scroll away.

Do

• Use the toolbar to provide the user with key actions that impact the whole editor, such as view settings or undo or when you need to provide breadcrumbs.
• As much as possible, support undo and redo functionality. Use the SAP Web IDE icons on the right-most side of the toolbar for this.
• Add breadcrumbs on the left side of the editor toolbar if the user can navigate from the content presented in the editor or if there’s a content hierarchy presented in the editor into which the user can drill down.
• Provide action buttons with an icon and without a border.
• Provide the button name in a tooltip with some explanation and/or a hot key.
• Order buttons according to usage: most frequently-used action on the left and the most seldom-used action on the right. This ensures that the most important buttons are the last to be moved into the overflow menu.
• Use Web IDE icons for the following generic actions: add, remove, reorder (up, down), sort, filter, and search.
• Align buttons to the right edge of the toolbar.

Don’t

• Don’t only show the button name in the button tooltip.