# EuiPageColumn

**Type:** component



Individual column within a page columns layout that supports collapsible behavior, headers, and responsive sizing.
Provides flexible column layouts with optional collapse functionality and automatic mobile handling.

### Basic column
```html
<eui-page-column label="Sidebar" euiSizeS>
  <eui-page-column-body>
    Sidebar content
  </eui-page-column-body>
</eui-page-column>
```

### Collapsible column
```html
<eui-page-column
  label="Filters"
  [isCollapsible]="true"
  [isCollapsed]="filtersCollapsed"
  expandAriaLabel="Expand filters"
  collapseAriaLabel="Collapse filters"
  (collapse)="onFiltersCollapse($event)">
  <eui-page-column-header>
    <eui-page-column-header-label>Filters</eui-page-column-header-label>
  </eui-page-column-header>
  <eui-page-column-body>Filter controls</eui-page-column-body>
</eui-page-column>
```

### Auto-collapse on resize
```html
<eui-page-column
  [isAutocloseOnContainerResize]="true"
  [autocloseContainerWidth]="768"
  [isAutocloseOnMobile]="true">
  Content
</eui-page-column>
```

### Accessibility
- Provide descriptive labels for column identification
- Collapse buttons have proper aria-labels
- Ensure collapsed columns can be reopened via keyboard
- Maintain focus management when collapsing/expanding

### Notes
- Supports size variants: euiSizeS, euiSizeM, euiSizeL, euiSizeXL, etc.
- `isCollapsedWithIcons` shows icon-only view when collapsed
- `hasSidebarMenu` optimizes layout for sidebar menu content
- `hasHeaderBodyShrinkable` allows header to shrink on scroll
- Auto-collapse features help manage responsive layouts automatically


**Selector:** `eui-page-column`

## Inputs
- **autocloseContainerWidth**: `number` - 
- **collapseAriaLabel**: `string` - 
- **expandAriaLabel**: `string` - 
- **hasHeaderBodyShrinkable**: `boolean` - 
- **hasSidebarMenu**: `boolean` - 
- **isAutocloseOnContainerResize**: `boolean` - 
- **isAutocloseOnMobile**: `boolean` - 
- **isCollapsed**: `boolean` - 
- **isCollapsedWithIcons**: `boolean` - 
- **isCollapsible**: `boolean` - 
- **isHighlighted**: `boolean` - 
- **isRightCollapsible**: `boolean` - 
- **label**: `any` - 
- **subLabel**: `any` - 
- **euiSizeS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeM**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeXL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSize2XL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSize3XL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSize4XL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiHighlighted**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

## Outputs
- **collapse**: `EventEmitter` - 
- **headerCollapse**: `EventEmitter` -