# EuiPageColumnComponent

**Type:** component

<p>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.</p>
<h3>Basic column</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-page-columns&gt;
  &lt;eui-page-column label=&quot;Sidebar&quot;&gt;
    &lt;eui-page-column-body&gt;Sidebar content&lt;/eui-page-column-body&gt;
  &lt;/eui-page-column&gt;
  &lt;eui-page-column label=&quot;Main Content&quot;&gt;
    &lt;eui-page-column-body&gt;Main content&lt;/eui-page-column-body&gt;
  &lt;/eui-page-column&gt;
&lt;/eui-page-columns&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;Navigation&quot;
  [isCollapsible]=&quot;true&quot;
  [isCollapsed]=&quot;false&quot;
  (collapse)=&quot;onSidebarToggle($event)&quot;&gt;
  &lt;eui-page-column-body&gt;
    &lt;nav&gt;Navigation items&lt;/nav&gt;
  &lt;/eui-page-column-body&gt;
&lt;/eui-page-column&gt;</code></pre></div><h3>With custom header content</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-page-column label=&quot;Filters&quot;&gt;
  &lt;eui-page-column-header-right-content&gt;
    &lt;button euiButton euiSecondary&gt;Clear All&lt;/button&gt;
  &lt;/eui-page-column-header-right-content&gt;
  &lt;eui-page-column-body&gt;Filter options&lt;/eui-page-column-body&gt;
&lt;/eui-page-column&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Column headers use semantic heading structure for screen readers</li>
<li>Collapse/expand buttons include proper aria-labels</li>
<li>Keyboard navigation supported for collapse toggle</li>
<li>Focus management maintained when toggling collapsed state</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be direct child of eui-page-columns component</li>
<li>Supports automatic collapse based on container width or mobile breakpoint</li>
<li>Use content projection directives for custom header, body, and footer sections</li>
<li>Collapse state can be controlled programmatically or by user interaction</li>
</ul>


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

**Standalone:** false

## Inputs

- **autocloseContainerWidth**: `number` - <p>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.</p>

- **collapseAriaLabel**: `string` - <p>Accessible label for the collapse button when column is expanded.
Automatically generated from label if not provided.</p>

- **expandAriaLabel**: `string` - <p>Accessible label for the expand button when column is collapsed.
Automatically generated from label if not provided.</p>

- **hasHeaderBodyShrinkable**: `boolean` - <p>Enables shrinkable behavior for the column header body section.
Allows header to reduce in size based on scroll or content state.</p>

- **hasSidebarMenu**: `boolean` - <p>Applies styling specific to columns containing sidebar navigation menus.
Adjusts spacing and layout for menu-based columns.</p>

- **hasSubColumns**: `boolean` - <p>Indicates the column contains nested sub-columns.
Applies appropriate styling for hierarchical column structures.</p>

- **isAutocloseOnContainerResize**: `boolean` - <p>Enables automatic column collapse when parent container width changes.
Works in conjunction with autocloseContainerWidth threshold.</p>

- **isAutocloseOnMobile**: `boolean` - <p>Automatically collapses the column when viewport enters mobile breakpoint.
Provides responsive behavior for smaller screens.</p>

- **isCollapsed**: `boolean` - <p>Controls the collapsed state of the column.
When true, minimizes column width and hides content; when false, displays full column.</p>

- **isCollapsedHidden**: `boolean` - <p>Completely hides the column when collapsed instead of showing a minimal collapsed state.
Only effective when isCollapsed is true.</p>

- **isCollapsedWithIcons**: `boolean` - <p>Displays icons in the collapsed column state for visual identification.
Provides visual cues when column is minimized.</p>

- **isCollapsible**: `boolean` - <p>Enables expand/collapse functionality for the column.
Adds a toggle button to show or hide column content.</p>

- **isHighlighted**: `boolean` - <p>Applies highlighted visual styling to emphasize the column.
Adds distinct background or border treatment.</p>

- **isRightCollapsible**: `boolean` - <p>Positions the collapse button on the right side of the column header.
By default, collapse button appears on the left.</p>

- **label**: `any` - <p>Primary heading text displayed in the column header.
Serves as the title for the column content.</p>

- **subLabel**: `any` - <p>Secondary descriptive text displayed in the column header.
Provides additional context about the column content.</p>


## Outputs

- **collapse**: `EventEmitter` - <p>Emitted when the column&#39;s collapsed state changes via user interaction or automatic triggers.
Payload: boolean indicating the new collapsed state (true when collapsed, false when expanded).</p>

- **headerCollapse**: `EventEmitter` - <p>Emitted when the column header&#39;s collapsed state changes.
Payload: boolean indicating the header collapse state.</p>

