### File

`packages/components/eui-page/components/eui-page-column/eui-page-column.component.ts`

### Description

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

Example :

    <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

Example :

    <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

Example :

    <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

### Implements

`OnInit` `OnDestroy`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
encapsulation | `ViewEncapsulation.None`
HostDirectives | `BaseStatesDirective` Inputs : euiSizeS euiSizeM euiSizeL euiSizeXL euiSize2XL euiSize3XL euiSize4XL euiSize5XL euiSize6XL euiSizeVariant euiHighlighted
selector | `eui-page-column`
imports | `NgTemplateOutlet` `CdkScrollable` `AsyncPipe` `EUI_ICON` `EUI_BUTTON`
templateUrl | `./eui-page-column.component.html`

### Index

###### Properties

- asService
- currentOffset
- customFooterContent
- customHeaderBodyContent
- customHeaderCollapsedContent
- customHeaderLeftContent
- customHeaderRightContent
- hasPreventMobileRendering
- isActive
- isHeaderBodyShrinked
- previousOffset
- treshHold

###### Methods

- Public onToggle

###### Inputs

- autocloseContainerWidth
- collapseAriaLabel
- expandAriaLabel
- hasHeaderBodyShrinkable
- hasSidebarMenu
- hasSubColumns
- isAutocloseOnContainerResize
- isAutocloseOnMobile
- isCollapsed
- isCollapsedHidden
- isCollapsedWithIcons
- isCollapsible
- isHighlighted
- isRightCollapsible
- label
- subLabel

###### Outputs

- collapse
- headerCollapse

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

autocloseContainerWidth
Type : `number`
Default value : `null`
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
Type : `string`
Accessible label for the collapse button when column is expanded. Automatically generated from label if not provided.

expandAriaLabel
Type : `string`
Accessible label for the expand button when column is collapsed. Automatically generated from label if not provided.

hasHeaderBodyShrinkable
Type : `boolean`
Default value : `false`
Enables shrinkable behavior for the column header body section. Allows header to reduce in size based on scroll or content state.

hasSidebarMenu
Type : `boolean`
Default value : `false`
Applies styling specific to columns containing sidebar navigation menus. Adjusts spacing and layout for menu-based columns.

hasSubColumns
Type : `boolean`
Default value : `false`
Indicates the column contains nested sub-columns. Applies appropriate styling for hierarchical column structures.

isAutocloseOnContainerResize
Type : `boolean`
Default value : `false`
Enables automatic column collapse when parent container width changes. Works in conjunction with autocloseContainerWidth threshold.

isAutocloseOnMobile
Type : `boolean`
Default value : `false`
Automatically collapses the column when viewport enters mobile breakpoint. Provides responsive behavior for smaller screens.

isCollapsed
Type : `boolean`
Default value : `false`
Controls the collapsed state of the column. When true, minimizes column width and hides content; when false, displays full column.

isCollapsedHidden
Type : `boolean`
Default value : `false`
Completely hides the column when collapsed instead of showing a minimal collapsed state. Only effective when isCollapsed is true.

isCollapsedWithIcons
Type : `boolean`
Default value : `false`
Displays icons in the collapsed column state for visual identification. Provides visual cues when column is minimized.

isCollapsible
Type : `boolean`
Default value : `false`
Enables expand/collapse functionality for the column. Adds a toggle button to show or hide column content.

isHighlighted
Type : `boolean`
Default value : `false`
Applies highlighted visual styling to emphasize the column. Adds distinct background or border treatment.

isRightCollapsible
Type : `boolean`
Default value : `false`
Positions the collapse button on the right side of the column header. By default, collapse button appears on the left.

label
Type : `any`
Primary heading text displayed in the column header. Serves as the title for the column content.

subLabel
Type : `any`
Secondary descriptive text displayed in the column header. Provides additional context about the column content.

### Outputs

collapse
Type : `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
Type : `EventEmitter`
Emitted when the column header's collapsed state changes. Payload: boolean indicating the header collapse state.

### HostBindings

class
Type : `string`

### Methods

Public onToggle
`onToggle()`
Returns : `void`

### Properties

asService
Type : `unknown`
Default value : `inject(EuiAppShellService)`

currentOffset
Type : `number`
Default value : `0`

customFooterContent
Type : `QueryList<EuiPageColumnFooterContentDirective>`
Decorators : `@ContentChild(undefined)`

customHeaderBodyContent
Type : `QueryList<EuiPageColumnHeaderBodyContentDirective>`
Decorators : `@ContentChild(undefined)`

customHeaderCollapsedContent
Type : `QueryList<EuiPageColumnHeaderCollapsedContentDirective>`
Decorators : `@ContentChild(undefined)`

customHeaderLeftContent
Type : `QueryList<EuiPageColumnHeaderLeftContentDirective>`
Decorators : `@ContentChild(undefined)`

customHeaderRightContent
Type : `QueryList<EuiPageColumnHeaderRightContentDirective>`
Decorators : `@ContentChild(undefined)`

hasPreventMobileRendering
Type : `unknown`
Default value : `false`

isActive
Type : `unknown`
Default value : `false`

isHeaderBodyShrinked
Type : `unknown`
Default value : `false`

previousOffset
Type : `number`
Default value : `0`

treshHold
Type : `number`
Default value : `50`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""