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.

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

Follow the HTML stucture listed in the right panel to get the drawers/sliders into your project.

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)

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.

Alternatives

				
// Basic drawer/slider
<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/slider
<div class="drawer drawer-sm" role="dialog">
   ...
</div>

// Large drawer/slider
<div class="drawer drawer-lg" role="dialog">
   ...
</div>