# EuiPageColumnComponent

**Type:** component



Individual column component for multi-column page layouts within eui-page-columns.
Provides collapsible sidebar functionality with automatic responsive behavior and custom content projection.
Supports header, body, and footer sections with flexible content areas and collapse/expand controls.
Automatically responds to container width changes and mobile breakpoints for adaptive layouts.
Must be used as a direct child of eui-page-columns to participate in column-based layouts.

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

### Collapsible column
```html
<eui-page-column
  label="Navigation"
  [isCollapsible]="true"
  [isCollapsed]="false"
  (collapse)="onSidebarToggle($event)">
  <eui-page-column-body>
    <nav>Navigation items</nav>
  </eui-page-column-body>
</eui-page-column>
```

### With custom header content
```html
<eui-page-column label="Filters">
  <eui-page-column-header-right-content>
    <button euiButton euiSecondary>Clear All</button>
  </eui-page-column-header-right-content>
  <eui-page-column-body>Filter options</eui-page-column-body>
</eui-page-column>
```

### Accessibility
- Column headers use semantic heading structure for screen readers
- Collapse/expand buttons include proper aria-labels
- Keyboard navigation supported for collapse toggle
- Focus management maintained when toggling collapsed state

### Notes
- Must be direct child of eui-page-columns component
- Supports automatic collapse based on container width or mobile breakpoint
- Use content projection directives for custom header, body, and footer sections
- Collapse state can be controlled programmatically or by user interaction


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

## Inputs
- **autocloseContainerWidth**: `number` - Container width threshold in pixels for automatic column collapse. When parent container width falls below this value, column automatically collapses. Only effective when isAutocloseOnContainerResize is true.
- **collapseAriaLabel**: `string` - Accessible label for the collapse button when column is expanded. Automatically generated from label if not provided.
- **expandAriaLabel**: `string` - Accessible label for the expand button when column is collapsed. Automatically generated from label if not provided.
- **hasHeaderBodyShrinkable**: `boolean` - Enables shrinkable behavior for the column header body section. Allows header to reduce in size based on scroll or content state.
- **hasSidebarMenu**: `boolean` - Applies styling specific to columns containing sidebar navigation menus. Adjusts spacing and layout for menu-based columns.
- **hasSubColumns**: `boolean` - Indicates the column contains nested sub-columns. Applies appropriate styling for hierarchical column structures.
- **isAutocloseOnContainerResize**: `boolean` - Enables automatic column collapse when parent container width changes. Works in conjunction with autocloseContainerWidth threshold.
- **isAutocloseOnMobile**: `boolean` - Automatically collapses the column when viewport enters mobile breakpoint. Provides responsive behavior for smaller screens.
- **isCollapsed**: `boolean` - Controls the collapsed state of the column. When true, minimizes column width and hides content; when false, displays full column.
- **isCollapsedHidden**: `boolean` - Completely hides the column when collapsed instead of showing a minimal collapsed state. Only effective when isCollapsed is true.
- **isCollapsedWithIcons**: `boolean` - Displays icons in the collapsed column state for visual identification. Provides visual cues when column is minimized.
- **isCollapsible**: `boolean` - Enables expand/collapse functionality for the column. Adds a toggle button to show or hide column content.
- **isHighlighted**: `boolean` - Applies highlighted visual styling to emphasize the column. Adds distinct background or border treatment.
- **isRightCollapsible**: `boolean` - Positions the collapse button on the right side of the column header. By default, collapse button appears on the left.
- **label**: `any` - Primary heading text displayed in the column header. Serves as the title for the column content.
- **subLabel**: `any` - Secondary descriptive text displayed in the column header. Provides additional context about the column content.
- **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]]
- **euiSize5XL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSize6XL**: `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` - Emitted when the column's collapsed state changes via user interaction or automatic triggers. Payload: boolean indicating the new collapsed state (true when collapsed, false when expanded).
- **headerCollapse**: `EventEmitter` - Emitted when the column header's collapsed state changes. Payload: boolean indicating the header collapse state.