Drawer template

Example template with a drawer. A drawer is an (auto-) collapsible sidebar with navigational elements. You see this pattern often in dashboards. Toggling the drawer is done with the checkbox hack.

When collapsed, the sidebar is completely hidden.

Selector Description
.layout--drawer Required On the html tag
.layout--fixed-header Required On the html tag.
.hamburger__checkbox Required The checkbox hack
.hamburger Required The clickable region that holds the hamburger icon
.drawer__checkbox Deprecated Replaced by .hamburger__checkbox
.drawer__menu Deprecated Replaced by .hamburger
.drawer Required Direct child of .main-container
.drawer__section Optional Place your navigational elements in here.
<!DOCTYPE html>
<html lang="en" class="no-js layout--drawer layout--fixed-header">
<head>...</head>
<body>
	<header class="site-header">...</header>
	<main class="main-container">
		<input type="checkbox" class="hamburger__checkbox" id="drawer-toggle">
		<label for="drawer-toggle" class="hamburger" role="button" aria-label="Menu">
			<span class="hamburger__line" role="presentation"></span>
			<span class="hamburger__line" role="presentation"></span>
			<span class="hamburger__line" role="presentation"></span>
		</label>
		<div class="drawer">
			<div class="drawer__section">
				<div class="drawer__section-title">...</div>
				<!-- navigational elements here -->
			</div>
		</div>
		<div class="main-content">
			...
		</div>
	</main>
</body>
</html>

Long filler text

Some long filler text to demo the scrolling behaviour. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam explicabo, eos inventore tempora eveniet facere minus iste soluta nulla nobis molestias veritatis, autem distinctio nam maiores non ullam vel laborum unde quisquam harum quidem. Commodi veritatis, vitae, nisi quidem porro aliquam soluta necessitatibus voluptatibus ex repellat deserunt molestiae neque sapiente laboriosam sequi! Architecto numquam suscipit, ex ipsa beatae.

Neque pariatur asperiores quidem natus provident voluptas expedita, architecto, officiis necessitatibus iure explicabo non mollitia quas voluptatum sunt commodi illo sequi, itaque nihil hic eaque tempore. Repudiandae ratione accusamus repellat necessitatibus quia aliquam, possimus. Amet voluptatibus delectus nostrum aperiam nulla dolorum cum saepe magnam adipisci consectetur numquam placeat voluptate ratione corporis odit necessitatibus fugiat autem, aspernatur quas, error, rerum a voluptatem iure!

Illum inventore doloremque, quas sit ad iusto aspernatur dicta autem, illo dolorum odio dolore similique laudantium consequuntur quasi sapiente facere pariatur possimus! Natus, repudiandae ea hic nemo nisi aliquid. Ad unde adipisci beatae quia! Animi voluptatem recusandae autem porro error dicta quas inventore. Dolorem laudantium ad quo temporibus tempore sunt omnis pariatur, exercitationem sint ipsum facilis modi commodi nam reiciendis consectetur velit dicta aliquid accusantium minima, repudiandae deleniti debitis porro enim! Minus corporis qui necessitatibus, consequatur, fugiat reprehenderit nam nihil.