---
id: Drawer
cssPrefix: pf-c-drawer
propComponents:
  [
    Drawer,
    DrawerContent,
    DrawerPanelContent,
    DrawerContentBody,
    DrawerPanelBody,
    DrawerSection,
    DrawerHead,
    DrawerActions,
    DrawerCloseButton,
    DrawerColorVariant,
  ]
section: components
---

## Examples

### Basic

```ts file="./DrawerBasic.tsx"
```

### Panel on right

```ts file="./DrawerPanelRight.tsx"
```

### Panel on left

```ts file="./DrawerPanelLeft.tsx"
```

### Panel on bottom

```ts file="./DrawerPanelBottom.tsx"
```

### Basic inline

```ts file="./DrawerBasicInline.tsx"
```

### Inline panel on right

```ts file="./DrawerInlinePanelRight.tsx"
```

### Inline panel on left

```ts file="./DrawerInlinePanelLeft.tsx"
```

### Stacked content body elements

```ts file="./DrawerStackedContentBodyElements.tsx"
```

### Modified content padding

```ts file="DrawerModifiedContentPadding.tsx"
```

### Modified panel padding

```ts file="DrawerModifiedPanelPadding.tsx"
```

### Additional section above drawer content

```ts file="DrawerAdditionalSectionAboveContent.tsx"
```

### Static drawer

**Note:** For mobile viewports, all drawer variants behave the same way. At the `md` breakpoint, or where `.pf-m-static{-on-[lg, xl, 2xl]}` is applied, the `static drawer` variant’s `close button` is automatically hidden because the drawer panel doesn’t close by design.

```ts file="DrawerStatic.tsx"
```

### Breakpoint

```ts file="DrawerBreakpoint.tsx"
```

### Resizable on right

```ts file="DrawerResizableOnRight.tsx"
```

### Resizable on left

```ts file="DrawerResizableOnLeft.tsx"
```

### Resizable on bottom

```ts file="DrawerResizableOnBottom.tsx"
```

### Resizable on inline

```ts file="DrawerResizableOnInline.tsx"
```

### Panel with light-200 background

```ts file="DrawerLightGray.tsx"
```