
Contextual Action Bar (Selection Mode)
Design the top app bar in its normal state, then its selection mode state after the user starts multi-select. In the default view it behaves like a standard mobile header with the screen title and primary actions.
When selection mode begins, the bar transforms into a contextual toolbar: show the selected count, replace the usual header affordances, and surface bulk actions such as delete and share. The change should feel like the same bar changing purpose, not a new component appearing.
This lives at the top of a list or grid screen where selection is a temporary mode. The user needs immediate feedback that items are selected and clear access to actions that apply to all chosen items.
The interesting part is the handoff: the bar must communicate mode change, preserve orientation, and make it obvious how to exit selection without losing context. The selected count should be the anchor for the whole state.
Treat the count as the title replacement in selection mode; if it reads clearly, the rest of the toolbar can stay visually restrained.
Better at UI design with every challenge
Select complexity and generate challenge.
Pick a platform.
Get design challenge updates in your inbox
New prompts and challenge updates. It’s free.