eui documentation
  1. Components
  2. EuiFooterComponent

File

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

Description

Standalone footer component for displaying supplementary content, links, and copyright information. Provides a flexible container with primary and default styling variants for different visual contexts. Unlike eui-app-footer which is part of the application shell, this component can be used independently in any layout. Content is projected via ng-content allowing complete customization of footer structure and elements.

Example :
<!-- Footer in app shell -->
<eui-app>
  <eui-app-footer>
    <eui-footer euiPrimary>
      © 2024 European Commission - <a href="/privacy">Privacy</a> - <a href="/legal">Legal Notice</a>
    </eui-footer>
  </eui-app-footer>
</eui-app>

<!-- Standalone footer in page -->
<eui-footer>
  <p>© 2024 My Organization</p>
  <nav>
    <a href="/about">About</a> |
    <a href="/contact">Contact</a>
  </nav>
</eui-footer>

Accessibility

  • Content projection allows flexible accessible structure
  • Links within footer are keyboard accessible
  • Use semantic HTML elements (nav, p) for proper structure
  • Ensure sufficient color contrast in both themes

Notes

  • Can be used standalone or within eui-app-footer
  • euiPrimary applies primary brand styling (default: false)
  • Content is projected via ng-content for complete flexibility
  • Common content includes copyright, legal links, version info, contact
  • Can contain navigation links, text, or custom elements
  • Styling adapts to primary or default theme variant
  • Independent component, not tied to application shell layout

Metadata

changeDetection ChangeDetectionStrategy.Default
encapsulation ViewEncapsulation.None
selector eui-footer
template 
<ng-content />
styleUrl ./footer.component.scss

Index

Inputs
HostBindings
Accessors

Inputs

euiPrimary
Type : boolean
Default value : false

Applies primary theme styling to the footer. When true, uses primary brand colors and emphasis. When false, uses default neutral styling.

HostBindings

class
Type : string

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""