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 (no header)

Same as the previous layout, but with no header.

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.

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

Fixed tabs

Simple header with fixed tabs.

Web Starter Kit

Blue Green Red