<div class="demo-preview-block"> <h2>Transparent header</h2> <p>Uses a header that scrolls with the text, rather than staying locked at the top</p> <div class="demo-layout"> <style> .layout-transparent { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); background: url('demo-images/transparent.jpg') center / cover; } .layout-transparent .mdl-layout__header, .layout-transparent .mdl-layout__drawer-button { /* This background is dark, so we set text to white. Use 87% black instead if your background is light. */ color: white; } .layout-transparent .mdl-layout__content { background-color: rgba(255,255,255,0.60)} </style> <div class="layout-transparent mdl-layout mdl-js-layout"> <header class="mdl-layout__header mdl-layout__header--transparent"> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">Title</span> <div class="mdl-layout-spacer"></div> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Title</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> <main class="mdl-layout__content"> <div class="page-content"></div> </main> </div> </div> <h2>Fixed drawer, no header</h2> <p> No header, and the drawer stays open on larger screens (fixed drawer).</p> <style> .fixed-drawer-container { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); width: 100%; position: relative; height: 300px; } .fixed-drawer-container .mdl-layout__content { background: white; } </style> <div class="demo-layout fixed-drawer-container"> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">Title</span> <div class="mdl-layout-spacer"></div> <nav class="mdl-navigation mdl-layout--large-screen-only"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Title</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> <main class="mdl-layout__content"> <div class="page-content"></div> </main> </div> </div> <h2>Fixed header and drawer</h2> <p>The drawer is always open in large screens. The header is always shown, even in small screens.</p> <style> .fixed-header-drawer-container { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); width: 100%; position: relative; height: 300px; } .fixed-header-drawer-container .mdl-layout__content { background: white; } </style> <div class="demo-layout fixed-header-drawer-container"> <div class="demo-layout"> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <div class="mdl-layout-spacer"></div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right"> <label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp"> <i class="material-icons">search</i> </label> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp" > </div> </div> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Title</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> <main class="mdl-layout__content"> </main> </div> </div> </div> <h2>Scrolling header</h2> <p>Uses a header that scrolls with the text, rather than staying locked at the top</p> <style> .scrolling-header-container { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); width: 100%; position: relative; height: 300px; } .scrolling-header-container .page-content { height: 600px; background: white; } .scrolling-header-container .mdl-layout__container.has-scrolling-header .mdl-layout__content { overflow: visible; } </style> <div class="demo-layout scrolling-header-container"> <div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button"> <header class="mdl-layout__header mdl-layout__header--scroll"> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">Title</span> <div class="mdl-layout-spacer"></div> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Title</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> <main class="mdl-layout__content"> <div class="page-content"></div> </main> </div> </div> <h2>Waterfall header</h2> <p>Uses a header that contracts as the page scrolls down.</p> <div class="demo-layout"> <style> .waterfall-header-container { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); width: 100%; position: relative; height: 300px; } .waterfall-header-container .page-content { height: 600px; background: white; } </style> <div class="waterfall-header-container"> <style> .waterfall-demo-header-nav .mdl-navigation__link:last-of-type { padding-right: 0; } </style> <div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button"> <header class="mdl-layout__header mdl-layout__header--waterfall"> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">Title</span> <div class="mdl-layout-spacer"></div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right"> <label class="mdl-button mdl-js-button mdl-button--icon" for="waterfall-exp"> <i class="material-icons">search</i> </label> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp" > </div> </div> </div> <div class="mdl-layout__header-row"> <div class="mdl-layout-spacer"></div> <nav class="waterfall-demo-header-nav mdl-navigation"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Title</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> <main class="mdl-layout__content"> <div class="page-content"></div> </main> </div> </div> </div> <h2>Scrollable tabs</h2> <p>Simple header with scrollable tabs.</p> <div class="demo-layout scrollable-tabs-container"> <style> .scrollable-tabs-container { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); width: 100%; position: relative; height: 300px; } .scrollable-tabs-container .mdl-layout__content { background: white; } </style> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">Title</span> </div> <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a> <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a> <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a> <a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a> <a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a> <a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Title</span> </div> <main class="mdl-layout__content"> <section class="mdl-layout__tab-panel is-active demo-layout__content-red" id="scroll-tab-1"> <div class="page-content"></div> <section class="mdl-layout__tab-panel demo-layout__content-green" id="scroll-tab-2"> <div class="page-content"></div> </section> <section class="mdl-layout__tab-panel demo-layout__content-blue" id="scroll-tab-3"> <div class="page-content"></div> </section> <section class="mdl-layout__tab-panel demo-layout__content-red" id="scroll-tab-4"> <div class="page-content"></div> </section> <section class="mdl-layout__tab-panel demo-layout__content-green" id="scroll-tab-5"> <div class="page-content"></div> </section> <section class="mdl-layout__tab-panel demo-layout__content-blue" id="scroll-tab-6"> <div class="page-content"></div> </section> </main> </div> </div> <h2>Fixed tabs</h2> <p>Simple header with fixed tabs.</p> <div class="demo-layout fixed-tabs-container"> <style> .fixed-tabs-container { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); width: 100%; position: relative; height: 300px; } .fixed-tabs-container .mdl-layout__content { background: white; } </style> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">Title</span> </div> <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a> <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a> <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Title</span> </div> <main class="mdl-layout__content"> <section class="mdl-layout__tab-panel is-active demo-layout__content-red" id="fixed-tab-1"> <div class="page-content"></div> </section> <section class="mdl-layout__tab-panel demo-layout__content-green" id="fixed-tab-2"> <div class="page-content"></div> </section> <section class="mdl-layout__tab-panel demo-layout__content-blue" id="fixed-tab-3"> <div class="page-content"></div> </section> </main> </div> </div> </div> </section>