Drawers or sliders

Drawers, or sliders as they are sometimes called, provide access to content and actions, such as detailed views, filtering options and more. It is a very versatile component that can either be permanently visible or open by clicking on e.g. a list item or settings.

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.

You can see an example of the drawer being used in practice in this Kindergarten prototype.

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)

					
<!-- Default drawer (medium size) -->
Copy to clipboard
<div class="drawer" role="dialog">
   <div class="drawer-header">
      <button type="button" class="close">Close</button>
      <h4>Title of the drawer</h4>
   </div>
   <div class="drawer-body">
      ...
   </div>
   <div class="drawer-footer justify-content-end d-flex">
      <button type="button" class="btn btn-primary">Save</button>
      <button type="button" class="btn">Close</button>
   </div>
</div>

<!-- Small drawer -->
Copy to clipboard
<div class="drawer drawer-sm" role="dialog">
   ...
</div>

<!-- Large drawer -->
Copy to clipboard
<div class="drawer drawer-lg" role="dialog">
   ...
</div>

Alternatives

• Collapsible list
• Modals