The Trowser is a full-width modal. The Trowser always has a header and a sticky footer, but does not have Left Navigation.
When to Use
- When creating, editing, or viewing a transaction
- When the user has to fill out a complex Form
- For single- or multi-screen task flows (example: an activation flow)
Appearance & Behavior
The Trowser’s sticky header is a secondary header to the Global Header. It displays the Trowser title and leads to some of the same places that the Global Header leads to (help, settings, etc.) There is always an “X” in the corner to close the Trowser, bringing the user back to where they started.
The optional Trowser Browser allows the user to access transactions that were previously opened within the current session. Because the user can navigate between multiple transactions, auto-save is a must, and is clearly displayed in the header.
The main content area of the Trowser scrolls behind the sticky header and footer. The Form specs differ between transaction forms and other forms, so make sure you take a look at those.
A Drawer can slide over the main content as a way to add items (examples: add a note to a transaction).
Navigation and the Sticky Footer
The Trowser may use a stacked model to navigate deeper into a context, with each new Trowser layering on top of the current Trowser using animation. For example, while in the “Receive Payment” trowser a user may click to view a related Invoice which would open that trowser on top. Trowsers can also navigate between sibling Trowsers (such as navigating between invoices).
The sticky footer is permanently anchored to the bottom of the screen and is home to the primary and secondary call-to-actions, as well as tertiary actions (text links) like print and export. The primary call-to-action is always on the right. When completing a transaction or flow, the primary action is save. During a flow navigation, Next becomes primary and Back is the secondary action placed to its left. When the various steps have completed, the primary call to action changes to “Save” or “Done”. No buttons appear on the left side of the trowser footer.
When there are many actions, links may be centered in the sticky footer. When there isn’t sufficient space, a “more” popover may be used.
There is no need for a cancel button because the “X” always closes the current Trowser, returning the user back to the layer they opened it from. If data has been entered without saving and autosave functionality doesn’t exist for the flow, a Critical Alert warns the user that they might lose data.
Each trowser slides down from the top. When it hits the bottom there is a small bounce to help indicate that it is layering on top of something.
Responsive Behavior on Large Screens
The trowser has a maximum width of 1440px. In the case where it appears on a very large screen, the trowser gets centered with a black 40% opacity mask behind it. If a 565px drawer is ever opened within the trowser, it needs to be positioned appropriately. When there is space for the drawer and trowser to sit completely or partially side by side, the drawer panel will push the trowser left to recenter the total width of the drawer and trowser. If there is not enough space, the drawer will overlap the trowser as it does in smaller windows. When the save and X to close the trowser are not overlapped by the drawer, they use a dissolve transition to hide temporarily.
Responsive Behavior on Smaller Screens
The trowser behaviors similarly across devices. The main changes are that on devices other than desktop, we show fewer options in the header and footer:
Fixed header required
Fixed footer required
X in top right corner, required
One single primary button in bottom right (which can launch a mobile friendly menu button)
Overflow icon for all other actions (which uses the mobile friendly menu button)
No help icon
No trowser history icon
No settings icon
- Capitalization of trowser titles is Title Case
- The trowser title should show the same name for all pages in the same flow. (Get Ready for Payroll, Add an Employee, Run Payroll, Payroll Tax Setup, etc.)