Drawer

Overview

Navigation drawers increase the level of a products discoverability by letting the user know exactly where they are in the product, and taking them to where they want to go quickly and effortlessly. It can be used as a first or second level of navigation.

A navigation drawer is a composition of menu components.

To implement a simple drawer container, just add the QtmDrawer and QtmDrawerBody components to your html.

<QtmDrawer>
  <QtmDrawerBody>...</QtmDrawerBody>
</QtmDrawer>

Header support

A header can be toggled on/off within the drawer just by adding a QtmDrawerHeader component into a drawer container.

<QtmDrawer>
  <QtmDrawerHeader>...</QtmDrawerHeader>
</QtmDrawer>

Footer support

A footer can be toggled on/off within the drawer just by adding a QtmDrawerFooter component into a drawer container.

<QtmDrawer>
  <QtmDrawerFooter>...</QtmDrawerFooter>
</QtmDrawer>

Customize your drawer

Use classes attribute to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).

Scroll vertically if needed

Use overflow-y-auto to allow vertical scrolling if needed.

<QtmDrawer>
  <QtmDrawerBody classes="overflow-y-auto">...</QtmDrawerBody>
</QtmDrawer>

Position

You can control your drawer position in the DOM by adding fixed|sticky|absolute| utilities and the {top|right|bottom|left}-{spacing-value} utilities

<QtmDrawer classes="fixed left-0 top-0">
  <QtmDrawerBody classes="overflow-y-auto">...</QtmDrawerBody>
</QtmDrawer>

Height

You can control your drawer height in the DOM by adding h-{spacing-value} utilities.

<QtmDrawer>
  <QtmDrawerFooter classes="overflow-y-auto">...</QtmDrawerFooter>
</QtmDrawer>

Example

Menu ItemMenu ItemMenu ItemSubmenu ItemSubmenu ItemSubmenu ItemMenu ItemMenu ItemMenu Item

<QtmDrawer>
  <QtmDrawerHeader>
    <QtmButton size="small" variant="ghost" color="neutral">
      <QtmIcon icon="reorder"></QtmIcon>
    </QtmButton>
  </QtmDrawerHeader>

  <QtmDrawerBody classes="overflow-y-scroll">
    <QtmMenuItemList>
      <QtmMenuItem>
        <QtmMenuItemLabel>
          <QtmIcon icon="home"></QtmIcon>
          <QtmTypography>Menu Item</QtmTypography>
        </QtmMenuItemLabel>
      </QtmMenuItem>
      <QtmMenuItem>
        <QtmMenuItemLabel>
          <QtmIcon icon="home"></QtmIcon>
          <QtmTypography>Menu Item</QtmTypography>
        </QtmMenuItemLabel>
      </QtmMenuItem>
      <QtmMenuItem active>
        <QtmMenuItemLabel>
          <QtmIcon icon="home"></QtmIcon>
          <QtmTypography>Menu Item</QtmTypography>
          <QtmIcon icon="expand_less"></QtmIcon>
        </QtmMenuItemLabel>
        <QtmSubmenuItemList>
          <QtmSubmenuItem active>Submenu Item</QtmSubmenuItem>
          <QtmSubmenuItem>Submenu Item</QtmSubmenuItem>
          <QtmSubmenuItem>Submenu Item</QtmSubmenuItem>
        </QtmSubmenuItemList>
      </QtmMenuItem>
      <QtmMenuItem>
        <QtmMenuItemLabel>
          <QtmIcon icon="home"></QtmIcon>
          <QtmTypography>Menu Item</QtmTypography>
        </QtmMenuItemLabel>
      </QtmMenuItem>
    </QtmMenuItemList>
  </QtmDrawerBody>

  <QtmDrawerFooter>
    <QtmMenuItemList>
      <QtmMenuItem>
        <QtmMenuItemLabel>
          <QtmIcon icon="home"></QtmIcon>
          <QtmTypography>Menu Item</QtmTypography>
        </QtmMenuItemLabel>
      </QtmMenuItem>
      <QtmMenuItem>
        <QtmMenuItemLabel>
          <QtmIcon icon="home"></QtmIcon>
          <QtmTypography>Menu Item</QtmTypography>
        </QtmMenuItemLabel>
      </QtmMenuItem>
    </QtmMenuItemList>
  </QtmDrawerFooter>
</QtmDrawer>

Size

The default size of the drawer is 'medium'. Drawer size can be changed by setting size property value.

<QtmDrawer size="small">...</QtmDrawer>
<QtmDrawer size="medium">...</QtmDrawer>
<QtmDrawer size="large">...</QtmDrawer>

Example of different drawer sizes

Menu ItemMenu ItemMenu ItemSubmenu ItemSubmenu ItemSubmenu ItemMenu ItemMenu Item

Menu ItemMenu ItemMenu ItemSubmenu ItemSubmenu ItemSubmenu ItemMenu ItemMenu Item

Menu ItemMenu ItemMenu ItemSubmenu ItemSubmenu ItemSubmenu ItemMenu ItemMenu Item

API

QtmDrawer

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
size	"large" | "medium" | "small"	'medium'	The size of drawer

QtmDrawerHeader

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing

QtmDrawerBody

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing

QtmDrawerFooter

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing