### File

`packages/components/layout/eui-app/eui-app-footer/footer.component.ts`

### Description

Application footer component that provides a bottom-level content area for copyright, links, and supplementary information. Positioned at the bottom of the application layout with semantic contentinfo role for accessibility. Content is projected via ng-content allowing flexible footer composition with custom elements and layouts. Automatically styled with consistent spacing and theming to match the application shell design.

Example :

    <!-- Basic app footer -->
    <eui-app>
      <eui-app-footer>
        <eui-footer euiPrimary>
          © 2026 European Commission - <a href="/privacy">Privacy</a> - <a href="/legal">Legal Notice</a>
        </eui-footer>
      </eui-app-footer>
    </eui-app>

### Accessibility

- Uses role="contentinfo" for semantic landmark identification
- Provides consistent location for supplementary information
- Links within footer are keyboard accessible
- Content projection allows flexible accessible structure

### Notes

- Must be used within eui-app component for proper layout integration
- Positioned at bottom of application, below all content
- Typically contains eui-footer child component for content
- Content is projected via ng-content for flexible composition
- Automatically styled with consistent spacing and theming
- Common content includes copyright, legal links, version info
- Footer remains at bottom even with minimal page content

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
encapsulation | `ViewEncapsulation.None`
selector | `eui-app-footer`

template

    <ng-content/>

styleUrl | `./footer.scss`

### Index

###### Properties

- class
- role

###### HostBindings

- attr.role
- class

### HostBindings

attr.role
Type : `string`
Default value : `'contentinfo'`

class
Type : `string`
Default value : `'eui-app-footer'`

### Properties

class
Type : `string`
Default value : `'eui-app-footer'`
Decorators : `@HostBinding()`

role
Type : `string`
Default value : `'contentinfo'`
Decorators : `@HostBinding('attr.role')`

# results matching ""

# No results matching ""