Drawer

A drawer slides in from the right side of the screen, appearing over the main content. It displays additional information while keeping the underlying page and its navigation visible and active.

Use when

You need to offer a more detailed view of a list item, where the information does not fit in an expand collapse list. Examples include full information about an invoice, time and absence overviews, payslips, CV's and much more.
You need to offer a more detailed view of information where the user can take one or more actions, for instance choose to delete, edit or add items.
You need to offer a quick way to navigate between detailed views of e.g. list items. Examples include invoices and CV's.

Demo page! Here you can find a demo page where you can test a drawer/slider, together with a navigation and a text panel.

Drawer size

Drawers/sliders have 3 optional sizes:

75% of your viewport (.drawer-lg)
50% of your viewport (is the default size of the drawers or .drawer-md)
25% of your viewport (.drawer-sm)

Example
HTML

<p class="d-flex justify-content-center m-0 gap-8">
	<button type="button" class="btn btn-secondary" id="showDrawer">Show default (medium) drawer/slider</button>
	<button type="button" class="btn btn-secondary" id="showDrawer-sm">Show small drawer/slider</button>
	<button type="button" class="btn btn-secondary" id="showDrawer-lg">Show large drawer/slider</button>
</p>

<div class="drawer" role="dialog" id="drawerExample">
	<div class="drawer-header">
		<button type="button" class="close btn-close">Close</button>
		<h4>Title of the default (medium) drawer</h4>
	</div>
	<div class="drawer-body">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula ex ex. Nullam lacinia nisl nisi, at tincidunt felis condimentum quis. Sed condimentum mi ut enim rutrum, quis tempus felis semper. Suspendisse posuere mi non mauris laoreet aliquet. Morbi diam orci, vulputate in posuere id, posuere in sem. Nam ornare urna magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean gravida volutpat leo nec vestibulum. Mauris sit amet rutrum erat, nec bibendum orci. Aenean tincidunt massa metus, non egestas dolor vulputate vel. Etiam hendrerit eget sapien feugiat fringilla. Integer vitae elementum lectus.</p>
	</div>
	<div class="drawer-footer justify-content-end d-flex gap-8">
		<button type="button" class="btn btn-lg btn-primary btn-close">Save</button>
		<button type="button" class="btn btn-lg btn-close">Close</button>
	</div>
</div>

<div class="drawer drawer-sm" role="dialog" id="drawerExample-sm">
	<div class="drawer-header">
		<button type="button" class="close btn-close">Close</button>
		<h4>Title of the small drawer</h4>
	</div>
	<div class="drawer-body">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula ex ex. Nullam lacinia nisl nisi, at tincidunt felis condimentum quis. Sed condimentum mi ut enim rutrum, quis tempus felis semper. Suspendisse posuere mi non mauris laoreet aliquet. Morbi diam orci, vulputate in posuere id, posuere in sem. Nam ornare urna magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean gravida volutpat leo nec vestibulum. Mauris sit amet rutrum erat, nec bibendum orci. Aenean tincidunt massa metus, non egestas dolor vulputate vel. Etiam hendrerit eget sapien feugiat fringilla. Integer vitae elementum lectus.</p>
	</div>
	<div class="drawer-footer justify-content-end d-flex gap-8">
		<button type="button" class="btn btn-lg btn-primary btn-close">Save</button>
		<button type="button" class="btn btn-lg btn-close">Close</button>
	</div>
</div>

<div class="drawer drawer-lg" role="dialog" id="drawerExample-lg">
	<div class="drawer-header">
		<button type="button" class="close btn-close">Close</button>
		<h4>Title of the large drawer</h4>
	</div>
	<div class="drawer-body">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula ex ex. Nullam lacinia nisl nisi, at tincidunt felis condimentum quis. Sed condimentum mi ut enim rutrum, quis tempus felis semper. Suspendisse posuere mi non mauris laoreet aliquet. Morbi diam orci, vulputate in posuere id, posuere in sem. Nam ornare urna magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean gravida volutpat leo nec vestibulum. Mauris sit amet rutrum erat, nec bibendum orci. Aenean tincidunt massa metus, non egestas dolor vulputate vel. Etiam hendrerit eget sapien feugiat fringilla. Integer vitae elementum lectus.</p>
	</div>
	<div class="drawer-footer justify-content-end d-flex gap-8">
		<button type="button" class="btn btn-lg btn-primary btn-close">Save</button>
		<button type="button" class="btn btn-lg btn-close">Close</button>
	</div>
</div>

For this component you need JavaScript! We recommend you to create your own script to open and close the drawer/slider. If you need help just contact us.

Drawer

Use when

Drawer size

Alternatives