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 qtm-drawer and qtm-drawer-body components to your html.

<qtm-drawer>
  <qtm-drawer-body>...</qtm-drawer-body>
</qtm-drawer>

Header support

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

<qtm-drawer>
  <qtm-drawer-header>...</qtm-drawer-header>
</qtm-drawer>

Footer support

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

<qtm-drawer>
  <qtm-drawer-footer>...</qtm-drawer-footer>
</qtm-drawer>

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.

<qtm-drawer>
  <qtm-drawer-body classes="overflow-y-auto">...</qtm-drawer-body>
</qtm-drawer>

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

<qtm-drawer classes="fixed left-0 top-0">
  <qtm-drawer-body classes="overflow-y-auto">...</qtm-drawer-body>
</qtm-drawer>

Height

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

<qtm-drawer>
  <qtm-drawer-footer classes="overflow-y-auto">...</qtm-drawer-footer>
</qtm-drawer>

Example

Menu ItemMenu ItemMenu ItemSubmenu ItemSubmenu ItemSubmenu ItemMenu ItemMenu ItemMenu Item

<qtm-drawer>
  <qtm-drawer-header>
    <qtm-button size="small" variant="ghost" color="neutral">
      <qtm-icon icon="reorder"></qtm-icon>
    </qtm-button>
  </qtm-drawer-header>

  <qtm-drawer-body classes="overflow-y-scroll">
    <qtm-menu-item-list>
      <qtm-menu-item>
        <qtm-menu-item-label>
          <qtm-icon icon="home"></qtm-icon>
          <qtm-typography>Menu Item</qtm-typography>
        </qtm-menu-item-label>
      </qtm-menu-item>

      <qtm-menu-item>
        <qtm-menu-item-label>
          <qtm-icon icon="home"></qtm-icon>
          <qtm-typography>Menu Item</qtm-typography>
        </qtm-menu-item-label>
      </qtm-menu-item>

      <qtm-menu-item active>
        <qtm-menu-item-label>
          <qtm-icon icon="home"></qtm-icon>
          <qtm-typography>Menu Item</qtm-typography>
          <qtm-icon icon="expand_less"></qtm-icon>
        </qtm-menu-item-label>
        <qtm-submenu-item-list>
          <qtm-submenu-item active>Submenu Item</qtm-submenu-item>
          <qtm-submenu-item>Submenu Item</qtm-submenu-item>
          <qtm-submenu-item>Submenu Item</qtm-submenu-item>
        </qtm-submenu-item-list>
      </qtm-menu-item>

      <qtm-menu-item>
        <qtm-menu-item-label>
          <qtm-icon icon="home"></qtm-icon>
          <qtm-typography>Menu Item</qtm-typography>
        </qtm-menu-item-label>
      </qtm-menu-item>
    </qtm-menu-item-list>
  </qtm-drawer-body>

  <qtm-drawer-footer>
    <qtm-menu-item-list>
      <qtm-menu-item>
        <qtm-menu-item-label>
          <qtm-icon icon="home"></qtm-icon>
          <qtm-typography>Menu Item</qtm-typography>
        </qtm-menu-item-label>
      </qtm-menu-item>
      <qtm-menu-item>
        <qtm-menu-item-label>
          <qtm-icon icon="home"></qtm-icon>
          <qtm-typography>Menu Item</qtm-typography>
        </qtm-menu-item-label>
      </qtm-menu-item>
    </qtm-menu-item-list>
  </qtm-drawer-footer>
</qtm-drawer>

Size

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

<qtm-drawer size="small">...</qtm-drawer>
<qtm-drawer size="medium">...</qtm-drawer>
<qtm-drawer size="large">...</qtm-drawer>

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

qtm-drawer

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

qtm-drawer-header

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

qtm-drawer-body

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

qtm-drawer-footer

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