### 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
class
###### Methods
onClick
###### Inputs
homeUrl logoHeight logoUrl logoWidth
###### HostBindings
class
###### HostListeners
click

### 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 ""