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>
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 activeId="drawer-body-menu-3">
<MenuItem id="drawer-body-menu-1">
<MenuItemLabel>
<Icon icon="home"></Icon>
<Typography>Menu Item</Typography>
</MenuItemLabel>
</MenuItem>
<MenuItem id="drawer-body-menu-2">
<MenuItemLabel>
<Icon icon="home"></Icon>
<Typography>Menu Item</Typography>
</MenuItemLabel>
</MenuItem>
<MenuItem id="drawer-body-menu-3">
<MenuItemLabel>
<Icon icon="home"></Icon>
<Typography>Menu Item</Typography>
<Icon icon="expand_less"></Icon>
</MenuItemLabel>
<SubmenuItemList>
<SubmenuItem id="drawer-body-menu-3-submenu-1">Submenu Item</SubmenuItem>
<SubmenuItem id="drawer-body-menu-3-submenu-2">Submenu Item</SubmenuItem>
<SubmenuItem id="drawer-body-menu-3-submenu-3">Submenu Item</SubmenuItem>
</SubmenuItemList>
</MenuItem>
<MenuItem id="drawer-body-menu-4">
<MenuItemLabel>
<Icon icon="home"></Icon>
<Typography>Menu Item</Typography>
</MenuItemLabel>
</MenuItem>
</MenuItemList>
</DrawerBody>
<DrawerFooter>
<MenuItemList>
<MenuItem id="drawer-footer-menu-1">
<MenuItemLabel>
<Icon icon="home"></Icon>
<Typography>Menu Item</Typography>
</MenuItemLabel>
</MenuItem>
<MenuItem id="drawer-footer-menu-2">
<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
The Drawer component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.
DrawerBody
The DrawerBody component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.
DrawerFooter
The DrawerFooter component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.
DrawerHeader
The DrawerHeader component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.
Spotted a bug, have a question, or want to suggest a new feature?
Submit an issue on GitLab