Our app’s layout provides users with consistent structure and behavior, as well as access to frequently used tools.
Our app’s layout is comprised of four main parts.
The layout tailors the experience to the user depending on the size of their browser and the available options in a workflow.
The main nav is used to navigate to different sections of the app.
The main nav is
Expanded main nav: minimum width of
The secondary nav is used to navigate between pages in a specific section of the app.
18% of layout, minimum of
The Trough is the primary means of toggling the secondary nav open and closed. The Trough occupies
100% height and
The page header is always present at the top of any page. The page header can contain both the Page Title and the Page Actions. The page header is fluid but always has a minimum of
16px of padding.
A Page Title is the name of the current page. Every page has a Page Title.
Page header actions
- Most page header level actions should use the Secondary button style
- Primary actions are used to save a view or as an action that will navigate the user away from the current page.
- Date range for scope of displayed data
- Is always the left most action if available
Date Pickeror Day/Week/Month cycle (calendar) define the data set being viewed.
- Overflow menu
[…]is for lower/lowest priority actions
- Share/Export is the first action following Filters.
- Filters (or whatever toggles
Content Rail) is always the right most action. This is kept in close proximity to
Content Railas it’s primary purpose is toggling
Content Railopen and closed.
There are three types of layouts for page content.
Flush content takes advantage of all available space with no maximum width and no padding. Examples include Asset Library, Calendar, and Dashboard.
Default content has a max width of
1400px, padding of
16px and is centered in the content area. Examples include reports.
Narrow content has a max width of
my padding of
16px and is centered in the content area. Examples include Message Feeds.
The right most page level action toggles a rail that shows/hides additional content level actions like filters. Content rail occupies
20% of Page Content with a minimum of
224px and a maximum of
Content Rail is triggered from the right most page level action.
The toolbar contains a set of global tools that can be used anywhere in the app.
The toolbar is