Breadcrumbs With Actions
The detail page header, breadcrumb trail, title, and right aligned actions.
The detail page header, breadcrumb trail, title, and right aligned actions.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Breadcrumbs With Actions is the detail page header pattern: a ui/breadcrumb trail (Projects / Apollo / Settings) sits above a title row with the page title Settings, a one line description, Environments, deploy keys, and member access for the Apollo project, and two right-aligned actions, View audit log and Save changes. A ruled bottom border separates the header from the content below.
The trail is a small data array. Two buttons at opposite ends of the action pair signal both the escape hatch and the commit, which is the minimum useful action set for a settings panel.
Reach for this block at the top of any detail or settings page, wired to your router for breadcrumb hrefs and to your form submit and audit log endpoints.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the project settings header. Other applications:
Tip: the description line is the right place to put the scope, Apollo project clarifies that Settings here is not workspace settings.