The Drawer component is a hidden panel that slides in from the edge of the screen. It can be used to display additional content without taking up space on the main screen.
Using the popover API, not requiring JavaScript.
This is a headline for a drawer
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae praesentium animi illum? Dicta ipsum dolorem sequi reprehenderit doloremque at ducimus laudantium officiis ad doloribus officia odio quam quaerat, amet mollitia, inventore architecto nisi voluptatum reiciendis dolor quidem harum temporibus a blanditiis! Optio, nostrum explicabo odio placeat et reprehenderit voluptatibus esse?
With modifier --right
This is a headline for a drawer
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae praesentium animi illum? Dicta ipsum dolorem sequi reprehenderit doloremque at ducimus laudantium officiis ad doloribus officia odio quam quaerat, amet mollitia, inventore architecto nisi voluptatum reiciendis dolor quidem harum temporibus a blanditiis! Optio, nostrum explicabo odio placeat et reprehenderit voluptatibus esse?
With modifier --top
This is a headline for a drawer
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae praesentium animi illum? Dicta ipsum dolorem sequi reprehenderit doloremque at ducimus laudantium officiis ad doloribus officia odio quam quaerat, amet mollitia, inventore architecto nisi voluptatum reiciendis dolor quidem harum temporibus a blanditiis! Optio, nostrum explicabo odio placeat et reprehenderit voluptatibus esse?
With modifier --bottom
This is a headline for a drawer
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae praesentium animi illum? Dicta ipsum dolorem sequi reprehenderit doloremque at ducimus laudantium officiis ad doloribus officia odio quam quaerat, amet mollitia, inventore architecto nisi voluptatum reiciendis dolor quidem harum temporibus a blanditiis! Optio, nostrum explicabo odio placeat et reprehenderit voluptatibus esse?