Skip to main content
🏠ComponentsDrawer

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 Drawer and DrawerBody components to your html.

<Drawer>
  <DrawerBody>...</DrawerBody>
</Drawer>

Header support​

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

<Drawer>
  <DrawerHeader>...</DrawerHeader>
</Drawer>

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

<Drawer>
  <DrawerFooter>...</DrawerFooter>
</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.

<Drawer>
  <DrawerBody classes="overflow-y-auto">...</DrawerBody>
</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

<Drawer classes="fixed left-0 top-0">
  <DrawerBody classes="overflow-y-auto">...</DrawerBody>
</Drawer>

Height​

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

<Drawer>
  <DrawerFooter classes="overflow-y-auto">...</DrawerFooter>
</Drawer>

Example​

<Drawer>
  <DrawerHeader>
    <Button size="small" variant="ghost" color="neutral">
      <Icon icon="reorder"></Icon>
    </Button>
  </DrawerHeader>

  <DrawerBody classes="overflow-y-scroll">
    <MenuItemList>
      <MenuItem>
        <MenuItemLabel>
          <Icon icon="home"></Icon>
          <Typography>Menu Item</Typography>
        </MenuItemLabel>
      </MenuItem>
      <MenuItem>
        <MenuItemLabel>
          <Icon icon="home"></Icon>
          <Typography>Menu Item</Typography>
        </MenuItemLabel>
      </MenuItem>
      <MenuItem active>
        <MenuItemLabel>
          <Icon icon="home"></Icon>
          <Typography>Menu Item</Typography>
          <Icon icon="expand_less"></Icon>
        </MenuItemLabel>
        <SubmenuItemList>
          <SubmenuItem active>Submenu Item</SubmenuItem>
          <SubmenuItem>Submenu Item</SubmenuItem>
          <SubmenuItem>Submenu Item</SubmenuItem>
        </SubmenuItemList>
      </MenuItem>
      <MenuItem>
        <MenuItemLabel>
          <Icon icon="home"></Icon>
          <Typography>Menu Item</Typography>
        </MenuItemLabel>
      </MenuItem>
    </MenuItemList>
  </DrawerBody>

  <DrawerFooter>
    <MenuItemList>
      <MenuItem>
        <MenuItemLabel>
          <Icon icon="home"></Icon>
          <Typography>Menu Item</Typography>
        </MenuItemLabel>
      </MenuItem>
      <MenuItem>
        <MenuItemLabel>
          <Icon icon="home"></Icon>
          <Typography>Menu Item</Typography>
        </MenuItemLabel>
      </MenuItem>
    </MenuItemList>
  </DrawerFooter>
</Drawer>

Size​

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

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

Example of different drawer sizes​

API​

Drawer​

Loading API documentation...

DrawerHeader​

Loading API documentation...

DrawerBody​

Loading API documentation...

DrawerFooter​

Loading API documentation...