eui documentation
  1. Components
  2. EuiHeaderLogoComponent

File

packages/components/layout/eui-header/header-logo/header-logo.component.ts

Description

Logo component for header placement, displaying organization branding with automatic theme and language adaptation. Provides clickable logo linking to home page with support for custom or default European Commission logos. Automatically switches between light and dark logo variants based on active theme. Integrates with EuiAppShellService to register logo presence and with translation service for language-specific logos. Supports custom logo URLs or defaults to ECL (Europa Component Library) logo assets.

Example :
<!-- Default EC logo -->
<eui-app>
  <eui-app-header>
    <eui-header>
      <eui-header-logo></eui-header-logo>
      <eui-header-environment>DEV</eui-header-environment>
      <eui-header-app appName="MyWorkplace"></eui-header-app>
    </eui-header>
  </eui-app-header>
</eui-app>

<!-- Custom logo -->
<eui-header-logo
  logoUrl="assets/custom-logo.svg"
  homeUrl="/home"
  logoHeight="48px"
  logoWidth="200px">
</eui-header-logo>

Accessibility

  • Logo is clickable and navigates to home page
  • Provides visual branding and orientation
  • Alt text provided via translation service
  • Keyboard accessible via RouterLink
  • Focus visible for keyboard navigation

Notes

  • Must be used within eui-header for proper layout
  • Positioned at the start of the header (leftmost)
  • Automatically adapts to active theme (light/dark)
  • Language-specific logos loaded based on active language
  • Default logos from ECL assets (logo-ec--en, logo-ec--fr, etc.)
  • Custom logoUrl overrides default ECL logos for both themes
  • homeUrl defaults to '..' for parent route navigation
  • Logo dimensions customizable via logoHeight and logoWidth
  • Registers/unregisters with EuiAppShellService on init/destroy
  • SVG format recommended for scalability

Implements

OnInit OnDestroy

Metadata

encapsulation ViewEncapsulation.None
selector eui-header-logo
imports RouterLink AsyncPipe TranslateModule
templateUrl ./header-logo.component.html
styleUrl ./header-logo.component.scss

Index

Properties
Inputs
HostBindings
Accessors

Inputs

homeUrl
Type : string
Default value : '..'

URL or route path for the home page navigation when logo is clicked. Supports both relative and absolute paths for Angular routing.
logoHeight
Type : string
Default value : '64px'

CSS height value for the logo image. Accepts any valid CSS height unit (px, rem, %, etc.).
logoUrl
Type : string

Custom URL path to a logo image file. When provided, overrides the default ECL logo and uses the specified image for both light and dark themes. Optional - defaults to language-specific ECL logos when not provided.
logoWidth
Type : string
Default value : '260px'

CSS width value for the logo image. Accepts any valid CSS width unit (px, rem, %, etc.).

HostBindings

class
Type : string
Default value : 'eui-header-logo'

Properties

cssClass
Type : string
Default value : 'eui-header-logo'
Decorators :
@HostBinding('class')

Accessors

svgUrl
getsvgUrl()
svgUrlDark
getsvgUrlDark()

results matching ""

    No results matching ""