# EuiToolbarLogoComponent

**Type:** component



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.

```html
<!-- 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


**Selector:** `eui-toolbar-logo`

## Inputs
- **homeUrl**: `string` - URL or route path for the home page navigation when logo is clicked. Supports both relative and absolute paths for Angular routing.
- **logoHeight**: `string` - CSS height value for the logo image. Accepts any valid CSS height unit (px, rem, %, etc.).
- **logoUrl**: `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**: `string` - CSS width value for the logo image. Accepts any valid CSS width unit (px, rem, %, etc.).