# Drawer The `` element is an intrusive interactive element, not passive. The element is best used when there is a requirement the user be made aware of the content being shown, moving focus from the main content to the drawer content. The element also supports a modal (blocking) state where the user must interact with the content of the element in order to continue. Passive dismissal of the content is not allowed. Users of this state must add a trigger for the user to move beyond this content. ## Use Cases The `auro-drawer` component should be used in situations where users may: * Be prompted to take an action before doing anything else or going back * Be prompted to view content with the option of closing it ## The Setup Triggering the drawer relies on functions being installed. See the following example code that is installed into this demo. ```javascript function toggleDrawer(drawerID) { const drawer = document.querySelector(drawerID); if (drawer.hasAttribute('open')) { drawer.removeAttribute('open'); } else { drawer.setAttribute('open', true); } } ``` Once the JavaScript is added to the scope of the experience, the next part is adding a trigger. In this example, the button component will toggle a drawer with the ID of `#demo1`. ``` html Open Drawer ``` ## The Structure The structure of the drawer itself consists of three slots. The `header`, `content` and `footer` slots. See the scaffolding example below for adding content to the component. ``` html [header content] [body content] [footer content] ``` It should be noted that the footer slot is reserved for the placement of action buttons. ## Example(s) ### Basic
Open default drawer
Default Drawer

When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See alaskaair.com/bagrules for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.

Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.

Before checking your bags, remember to:
  • Caerphilly croque monsieur fondue
  • Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings
  • Cheddar cheese and biscuits chalk and cheese
  • Camembert de normandie stinking bishop bavarian bergkase
Close
See code ```html
Open default drawer
Default Drawer

When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See alaskaair.com/bagrules for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.

Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.

Before checking your bags, remember to:
  • Caerphilly croque monsieur fondue
  • Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings
  • Cheddar cheese and biscuits chalk and cheese
  • Camembert de normandie stinking bishop bavarian bergkase
Close
```