## Examples

### Basic


import DrawerBasic from "./DrawerBasic.tsx?raw"

<LiveExample src={DrawerBasic} />

### Panel at end


import DrawerPanelEnd from "./DrawerPanelEnd.tsx?raw"

<LiveExample src={DrawerPanelEnd} />

### Panel at start


import DrawerPanelStart from "./DrawerPanelStart.tsx?raw"

<LiveExample src={DrawerPanelStart} />

### Panel on bottom


import DrawerPanelBottom from "./DrawerPanelBottom.tsx?raw"

<LiveExample src={DrawerPanelBottom} />

### Basic inline


import DrawerBasicInline from "./DrawerBasicInline.tsx?raw"

<LiveExample src={DrawerBasicInline} />

### Inline panel at end


import DrawerInlinePanelEnd from "./DrawerInlinePanelEnd.tsx?raw"

<LiveExample src={DrawerInlinePanelEnd} />

### Inline panel at start


import DrawerInlinePanelStart from "./DrawerInlinePanelStart.tsx?raw"

<LiveExample src={DrawerInlinePanelStart} />

### Stacked content body elements


import DrawerStackedContentBodyElements from "./DrawerStackedContentBodyElements.tsx?raw"

<LiveExample src={DrawerStackedContentBodyElements} />

### Modified content padding


import DrawerModifiedContentPadding from "./DrawerModifiedContentPadding.tsx?raw"

<LiveExample src={DrawerModifiedContentPadding} />

### Modified panel padding


import DrawerModifiedPanelPadding from "./DrawerModifiedPanelPadding.tsx?raw"

<LiveExample src={DrawerModifiedPanelPadding} />

### Additional section above drawer content


import DrawerAdditionalSectionAboveContent from "./DrawerAdditionalSectionAboveContent.tsx?raw"

<LiveExample src={DrawerAdditionalSectionAboveContent} />

### 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.


import DrawerStatic from "./DrawerStatic.tsx?raw"

<LiveExample src={DrawerStatic} />

### Breakpoint


import DrawerBreakpoint from "./DrawerBreakpoint.tsx?raw"

<LiveExample src={DrawerBreakpoint} />

### Resizable at end


import DrawerResizableAtEnd from "./DrawerResizableAtEnd.tsx?raw"

<LiveExample src={DrawerResizableAtEnd} />

### Resizable at start


import DrawerResizableAtStart from "./DrawerResizableAtStart.tsx?raw"

<LiveExample src={DrawerResizableAtStart} />

### Resizable on bottom


import DrawerResizableOnBottom from "./DrawerResizableOnBottom.tsx?raw"

<LiveExample src={DrawerResizableOnBottom} />

### Resizable on inline


import DrawerResizableOnInline from "./DrawerResizableOnInline.tsx?raw"

<LiveExample src={DrawerResizableOnInline} />

### Panel with secondary background


import DrawerSecondaryBackground from "./DrawerSecondaryBackground.tsx?raw"

<LiveExample src={DrawerSecondaryBackground} />

### With focus trap

When a [focus trap](/accessibility/product-development-guide#trapping-focus) is enabled on an element, a user will only be able to interact with the contents of that element until the focus trap is closed or deactivated.

To enable and customize a focus trap on a drawer panel, apply the `focusTrap` property to the `<DrawerPanelContent>` component. Enabling a focus trap with `focusTrap.enabled` will also automatically place focus on the first focusable element when the drawer panel expands, and return focus to the previously focused element when it collapses.

To customize which element receives focus when the drawer panel expands, use the `focusTrap.elementToFocusOnExpand` property.


import DrawerFocusTrap from "./DrawerFocusTrap.tsx?raw"

<LiveExample src={DrawerFocusTrap} />