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>
Footer support
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>
Sizes
Drawers are available in three sizes: small, medium and large. By default, drawers have size medium.
Event handling
The Drawer component itself doesn't have specific event handlers. Event handling should be implemented on the interactive elements inside the drawer, such as buttons or menu items.
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 |