Loading...

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 header with bottom bar

Always shows a header, even in smaller screens.

Web Starter Kit
Web Starter Kit

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

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

Fixed tabs

Simple header with fixed tabs.

Web Starter Kit