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.

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