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)

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