Application shells
Stacked layouts
A horizontal top nav with content stacked beneath it.
Light nav
Light top nav with primary actions and avatar menu.
Open
Dark nav
Dark top nav for high-contrast product chrome.
Open
Branded nav
Saturated brand color top nav.
Open
With page heading
Top nav plus a sub-header with title and primary action.
Open
With tabs
Top nav with secondary tabs for in-page navigation.
Open
With secondary header
Top nav plus a separated secondary toolbar.
Open
With search
Prominent inline search field in the top nav.
Open
With overlap
Branded header with content card overlapping it.
Open
With card search
Compact branded header with white search field.
Open