Drawer

Use the drawer component to provide easy access to information that does not need to be visible at all times.

Add the component to your page

When you are editing your page using page-builder:

  1. Optional step. Add a content block to your page by clicking the add_circle button.

  2. Add a component to your page (or the newly-added content block on your page if the optional step above is taken) by clicking the widgets Add component button.

  3. Locate the drawer Squiz core component within the component browser and then click the Select button.

    drawer component select

  4. This will add the drawer component to your page.

Configure the drawer component

components:drawer/drawer-fields.png[]
  1. Enter the drawer’s title.

  2. Enter the drawer’s content.

  3. Enter a unique ID for the drawer. The ID will be used to trigger the drawer in another component.

  4. Specify the position of the drawer when it is open.

  5. Specify the size of the drawer as a percentage of the screen.

    The drawer will always take up 100% of the screen on mobile.

Basic example

This image shows an active drawer.

drawer example

You can apply your own CSS styling.