import './Drawer.css'

## Examples

### Closed panel on right (default)


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Expanded panel on right


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Closed panel on left


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Expanded panel on left


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Closed panel on bottom


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Expanded panel on bottom


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Expanded inline panel


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### Expanded inline panel on left


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### Static


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

### Stacked content body elements


import Example10 from './Example10.html?raw'

<LiveExample html={Example10} />

### Modified content body padding


import Example11 from './Example11.html?raw'

<LiveExample html={Example11} />

### Modified panel body padding


import Example12 from './Example12.html?raw'

<LiveExample html={Example12} />

### Modified panel width


import Example13 from './Example13.html?raw'

<LiveExample html={Example13} />

### Additional section above main


import Example14 from './Example14.html?raw'

<LiveExample html={Example14} />

### Resizable panel


import Example15 from './Example15.html?raw'

<LiveExample html={Example15} />

### Resizable left panel


import Example16 from './Example16.html?raw'

<LiveExample html={Example16} />

### Resizable bottom panel


import Example17 from './Example17.html?raw'

<LiveExample html={Example17} />

### Resizable inline panel


import Example18 from './Example18.html?raw'

<LiveExample html={Example18} />

### Panel with secondary background


import Example19 from './Example19.html?raw'

<LiveExample html={Example19} />

### Accessibility

| Class | Applied to | Outcome |
| -- | -- | -- |
| `role="separator"` | `.pf-v6-c-drawer__splitter` | Indicates that the splitter is a separator. **Required** |
| `tabindex="0"` | `.pf-v6-c-drawer__splitter` | Inserts the splitter into the tab order of the page so that it is focusable. **Required** |
| `aria-orientation="horizontal"` | `.pf-v6-c-drawer__splitter` | Indicates that the splitter is oriented horizontally. |
| `aria-orientation="vertical"` | `.pf-v6-c-drawer__splitter.pf-m-vertical` | Indicates that the splitter is oriented vertically. |

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-drawer__splitter` | `<div>` | Initiates the splitter. |
| `.pf-v6-c-drawer__splitter-handle` | `<div>` | Initiates the splitter handle element. |
| `.pf-m-vertical` |  `.pf-v6-c-drawer__splitter` | Modifies the splitter to be vertical. |

## Documentation

### Accessibility

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `aria-expanded="true"` | `action that opens drawer` | Indicates that the expandable content is visible. **Required** |
| `aria-expanded="false"` | `action that opens drawer` | Indicates that the expandable content is hidden. **Required** |
| `hidden` | `.pf-v6-c-drawer__panel` | Hides the drawer panel from assistive technologies. **Required** |

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-drawer` | `<div>` | Initiates the drawer container. **Required** |
| `.pf-v6-c-drawer__section` | `<div>` | Initiates a drawer section area. This element can be used above or below `.pf-v6-c-drawer__main` for titles, toolbars, footers, etc. |
| `.pf-v6-c-drawer__main` | `<div>` | Initiates the drawer main area. **Required** |
| `.pf-v6-c-drawer__content` | `<div>` | Initiates the drawer content container. **Required** |
| `.pf-v6-c-drawer__panel` | `<aside>` | Initiates the drawer panel container. **Required** |
| `.pf-v6-c-drawer__panel-main` | `<div>` | Initiates the drawer panel main container for resizable drawers only. |
| `.pf-v6-c-drawer__body` | `<div>` | Initiates a drawer body container and is the child of `.pf-v6-c-drawer__content`, `.pf-v6-c-drawer__panel` and `.pf-v6-c-drawer__panel-main`. **Required** |
| `.pf-v6-c-drawer__head` | `<div>` | Initiates a drawer head container. This container positions `.pf-v6-c-drawer__actions`, if present. |
| `.pf-v6-c-drawer__actions` | `<div>` | Initiates an actions container within `.pf-v6--drawer__head`. |
| `.pf-v6-c-drawer__close` | `<div>` | Identifies the drawer close button within `.pf-v6-c-drawer__actions`. |
| `.pf-v6-c-drawer__description` | `<div>` | Initiates a drawer panel description. |
| `.pf-m-panel-left` | `.pf-v6-c-drawer` | Modifies the drawer panel to expand from the left. |
| `.pf-m-panel-bottom` | `.pf-v6-c-drawer` | Modifies the drawer panel to expand from the bottom. **Note:** percentage based panel sizes require the drawer component's parent element have an implicit or explicit height. |
| `.pf-m-expanded` | `.pf-v6-c-drawer` | Modifies the drawer panel for the expanded state. |
| `.pf-m-static{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/tokens/all-patternfly-tokens). |
| `.pf-m-inline{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/tokens/all-patternfly-tokens) will default to the `md` breakpoint. |
| `.pf-m-no-border` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel border treatment to disable all border treatment. |
| `.pf-m-padding` | `.pf-v6-c-drawer__body` | Modifies the element to add padding. |
| `.pf-m-no-padding` | `.pf-v6-c-drawer__body` | Modifies the element to remove padding. |
| `.pf-m-no-background` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__panel` | Modifies the drawer element background color to transparent. |
| `.pf-m-primary` | `.pf-v6-c-drawer__content` | Modifies the drawer content to use the primary background color. |
| `.pf-m-secondary` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__content`, `.pf-v6-c-drawer__panel` | Modifies the drawer element to use the secondary background color. |
| `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/tokens/all-patternfly-tokens). |
| `.pf-m-resizable` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel to be resizable. Intended for use with the `.pf-v6-c-drawer__splitter` element. |
| `--pf-v6-c-drawer__panel--md--FlexBasis--min` | `.pf-v6-c-drawer__panel` | Defines the drawer panel minimum size. |
| `--pf-v6-c-drawer__panel--md--FlexBasis` | `.pf-v6-c-drawer__panel` | Defines the drawer panel size. |
| `--pf-v6-c-drawer__panel--md--FlexBasis--max` | `.pf-v6-c-drawer__panel` | Defines the drawer panel maximum size. |