File
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
HostBindings
|
attr.role
|
Type : string
|
Default value : 'contentinfo'
|
|
class
|
Type : string
|
Default value : 'eui-app-footer'
|
|
class
|
Type : string
|
Default value : 'eui-app-footer'
|
Decorators :
@HostBinding()
|
|
role
|
Type : string
|
Default value : 'contentinfo'
|
Decorators :
@HostBinding('attr.role')
|