# EuiPageColumn

**Type:** component

<p>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.</p>
<h3>Basic column</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-page-column label=&quot;Sidebar&quot; euiSizeS&gt;
  &lt;eui-page-column-body&gt;
    Sidebar content
  &lt;/eui-page-column-body&gt;
&lt;/eui-page-column&gt;</code></pre></div><h3>Collapsible column</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-page-column
  label=&quot;Filters&quot;
  [isCollapsible]=&quot;true&quot;
  [isCollapsed]=&quot;filtersCollapsed&quot;
  expandAriaLabel=&quot;Expand filters&quot;
  collapseAriaLabel=&quot;Collapse filters&quot;
  (collapse)=&quot;onFiltersCollapse($event)&quot;&gt;
  &lt;eui-page-column-header&gt;
    &lt;eui-page-column-header-label&gt;Filters&lt;/eui-page-column-header-label&gt;
  &lt;/eui-page-column-header&gt;
  &lt;eui-page-column-body&gt;Filter controls&lt;/eui-page-column-body&gt;
&lt;/eui-page-column&gt;</code></pre></div><h3>Auto-collapse on resize</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-page-column
  [isAutocloseOnContainerResize]=&quot;true&quot;
  [autocloseContainerWidth]=&quot;768&quot;
  [isAutocloseOnMobile]=&quot;true&quot;&gt;
  Content
&lt;/eui-page-column&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Provide descriptive labels for column identification</li>
<li>Collapse buttons have proper aria-labels</li>
<li>Ensure collapsed columns can be reopened via keyboard</li>
<li>Maintain focus management when collapsing/expanding</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Supports size variants: euiSizeS, euiSizeM, euiSizeL, euiSizeXL, etc.</li>
<li><code>isCollapsedWithIcons</code> shows icon-only view when collapsed</li>
<li><code>hasSidebarMenu</code> optimizes layout for sidebar menu content</li>
<li><code>hasHeaderBodyShrinkable</code> allows header to shrink on scroll</li>
<li>Auto-collapse features help manage responsive layouts automatically</li>
</ul>


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

**Standalone:** false

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

## Outputs

- **collapse**: `EventEmitter` - 
- **headerCollapse**: `EventEmitter` - 
