Consoles - Quick Action Bars

Problem

Application screen real estate is very limited. Generally an application can have multiple actions available for users on a single screen. Introducing buttons for each action can use a lot of space. Additionally, buttons can also cause consistency problems between screens and applications.

Solution

Add a quick-action bar to the application.

The quick action bar is a branded top bar within the application that offers easy access to relevant actions on the screen, and also provides a shortcut to application's home screen. The quick action bar can also be used to indicate the user's location within the application.

HTML code here
	

CSS code here
	

Use When

A quick action bar popover can be used when you want to provide actions for items that have competing internal targets. It has to be triggered from a distinct visual target, so the user knows that there's something they can take action on. The popover should not block the screen like a traditional dialog, but should appear above or below the item. Only use the most important and obvious actions in the quick action bar. For other contextual actions a contextual menu may be added.

A quick action bar should not be used where multiple selection is supported. In this case, a button bar should be used instead.

Examples