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.
<div class="qtm-drawer">
<div class="qtm-drawer-body">...</div>
</div>
Header support
A header can be toggled on/off within the drawer just by adding a qtm-drawer-header class into a container.
<div class="qtm-drawer">
<div class="qtm-drawer-header">...</div>
...
</div>
Footer support
A footer can be toggled on/off within the drawer just by adding a qtm-drawer-footer class into a container.
<div class="qtm-drawer">
...
<div class="qtm-drawer-footer">...</div>
</div>
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.
<div class="qtm-drawer">
<div class="qtm-drawer-body overflow-y-auto">...</div>
</div>
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
<div class="qtm-drawer fixed left-0 top-0">
<div class="qtm-drawer-body overflow-y-auto">...</div>
</div>
Height
You can control your drawer height in the DOM by adding h-{spacing-value} utilities.
<div class="qtm-drawer">
<div class="qtm-drawer-body overflow-y-auto">...</div>
</div>
Example
<aside class="qtm-drawer">
<div class="qtm-drawer-header">
<button class="qtm-button qtm-ghost qtm-neutral qtm-small">
<i class="material-icons qtm-icon">reorder</i>
</button>
</div>
<nav class="qtm-drawer-body overflow-y-scroll">
<ul class="qtm-menu-item-list">
<li class="qtm-menu-item">
<a class="qtm-menu-item-label" tabindex="0">
<i class="material-icons qtm-icon">perm_media</i>
<span>Menu item</span>
</a>
</li>
<li class="qtm-menu-item">
<a class="qtm-menu-item-label" tabindex="0">
<i class="material-icons qtm-icon">perm_media</i>
<span>Menu item</span>
</a>
</li>
<li class="qtm-menu-item qtm-active">
<a class="qtm-menu-item-label" tabindex="0">
<i class="material-icons qtm-icon">perm_media</i>
<span>Menu item</span>
<i class="material-icons qtm-icon">keyboard_arrow_up</i>
</a>
<ul class="qtm-submenu-item-list">
<li class="qtm-submenu-item qtm-active" tabindex="0">
<a><span>Submenu Item</span></a>
</li>
<li class="qtm-submenu-item" tabindex="0">
<a><span>Submenu Item</span></a>
</li>
<li class="qtm-submenu-item" tabindex="0">
<a><span>Submenu Item</span></a>
</li>
</ul>
</li>
<li class="qtm-menu-item">
<a class="qtm-menu-item-label" tabindex="0">
<i class="material-icons qtm-icon">perm_media</i>
<span>Menu item</span>
</a>
</li>
</ul>
</nav>
<nav class="qtm-drawer-footer">
<ul class="qtm-menu-item-list">
<li class="qtm-menu-item">
<a class="qtm-menu-item-label" tabindex="0">
<i class="material-icons qtm-icon">perm_media</i>
<span>Menu item</span>
</a>
</li>
<li class="qtm-menu-item">
<a class="qtm-menu-item-label" tabindex="0">
<i class="material-icons qtm-icon">perm_media</i>
<span>Menu item</span>
</a>
</li>
</ul>
</nav>
</aside>
Size
The default size of the drawer is 'medium'. Drawer size can be changed by setting qt{'m-{size}'} value.
<aside class="qtm-drawer qtm-small">...</aside>
<aside class="qtm-drawer qtm-medium">...</aside>
<aside class="qtm-drawer qtm-large">...</aside>