Default layout

Uses a header for large screen sizes and a collapsible drawer for smaller screens.

Web Starter Kit
Web Starter Kit
Scrolling header

Same as the standard layout, but the header scrolls with the content.

Web Starter Kit
Web Starter Kit
Fixed drawer with header

The drawer is always open in large screen sizes, functioning as side navigation.

Fixed drawer layout demo
Web Starter Kit
Fixed drawer (no header)

Same as the previous layout, but with no header.

Web Starter Kit
Fixed header

Always shows a header, even in smaller screens.

Web Starter Kit
Web Starter Kit
Fixed drawer and fixed header

The drawer is always open in large screens. The header is always shown, even in small screens.

Fixed drawer and header
Web Starter Kit
Multi-row layout

Example of a more complex waterfall header, with multiple rows (on large screens only).

Web Starter Kit
Multi-row layout demo
Web Starter Kit
Transparent header

Uses a transparent header that draws on top of the layout's background.

Web Starter Kit
Web Starter Kit
Scrollable tabs

Simple header with scrollable tabs.

Web Starter Kit Blue Green Red Blue Two Green Two Red Two Blue Three Green Three Red Three Blue Four Green Four Red Four Blue Five Green Five Red Five Blue Six Green Six Red Six
Blue
Green
Red
Fixed tabs

Simple header with fixed tabs.

Web Starter Kit Blue Green Red
Blue
Green
Red