eui documentation
  1. Components
  2. EuiToolbarLogoComponent

File

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

Description

Logo component for toolbar placement, displaying organization branding with automatic navigation to home page. Provides clickable logo linking to home route with support for custom or default Europa flag logo. Automatically resolves asset paths using EuiConfig for flexible asset location configuration. Integrates with Angular Router for navigation on click. Typically used within eui-toolbar for consistent branding across the application.

Example :
<!-- Default Europa flag logo -->
<eui-app>
  <eui-app-toolbar>
    <eui-toolbar>
      <eui-toolbar-logo></eui-toolbar-logo>
      <eui-toolbar-mega-menu [items]="menuItems"></eui-toolbar-mega-menu>
    </eui-toolbar>
  </eui-app-toolbar>
</eui-app>

<!-- Custom logo -->
<eui-toolbar-logo
  logoUrl="assets/custom-logo.png"
  homeUrl="/home"
  logoHeight="32px"
  logoWidth="48px">
</eui-toolbar-logo>

Accessibility

  • Logo is clickable and navigates to home page
  • Provides visual branding and orientation
  • Keyboard accessible via click handler
  • Focus visible for keyboard navigation
  • Alt text should be provided in template

Notes

  • Must be used within eui-toolbar for proper layout
  • Positioned at the start of the toolbar (leftmost)
  • Default logo: Europa flag small (36x53px)
  • Custom logoUrl overrides default logo
  • homeUrl defaults to '..' for parent route navigation
  • Logo dimensions customizable via logoHeight and logoWidth
  • Asset path resolved via EuiConfig (default: 'assets')
  • Click handler navigates using Angular Router
  • Simpler alternative to eui-header-logo for toolbar layouts
  • No theme adaptation (unlike eui-header-logo)
  • PNG format for default logo

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
encapsulation ViewEncapsulation.None
selector eui-toolbar-logo
templateUrl ./toolbar-logo.component.html

Index

Properties
Methods
Inputs
HostBindings
HostListeners

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 : '36px'

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 Europa flag logo. Optional - defaults to Europa flag small logo when not provided.
logoWidth
Type : string
Default value : '53px'

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

HostBindings

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

HostListeners

click
click()

Methods

onClick
onClick()
Decorators :
@HostListener('click')
Returns : void

Properties

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

results matching ""

    No results matching ""