A Drawer is a collapsible control that is omnipresent throughout an application at the top of the screen.

Behaviours & States


Drawers contain an omnipresent access point for content. 

Drawers reside at the top of the screen.


By default, the Drawer is closed. The user can open the Drawer by selecting the Drawer Handle. When open, all Panels are pushed down. By default, the Top Drawer opens to full screen, but can be customized so that the Drawer opens partially.


Additionaly, multiple Drawers can be used. When closed, the control appears as normal. When the control is opened, a menu is shown that allows the user to select an option from up to three options in the Drawer. Once an option is selected, the Drawer opens fully to reveal the related content. Closing the multiTop Drawer fully closes it. If the user wants to choose another option, they would have to close the Top Drawer and reopen.


  • Closed The Drawer is closed, but a Handle remains visible to all the user to open the Drawer
  • Open The Drawer is open and the Drawer contents are visible to the user.
  • Focus (hover) The Drawer has the current focus from the remote and is ready to be selected.


The Drawer is the full width of the screen. Its height is variable based on the content contained within. The height can be fixed and content can be scrolled.