eui documentation
  1. Components
  2. EuiToolbarAppComponent

File

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

Description

Application name and subtitle component for toolbar placement, displaying the application title and descriptive text. Provides a compact representation of application identity suitable for toolbar layouts. Displays application name with optional subtitle for additional context or section information. Typically used within eui-toolbar for consistent application branding in toolbar-based layouts. Simpler alternative to eui-header-app for toolbar-specific use cases.

Example :
<eui-app>
  <eui-app-toolbar>
    <eui-toolbar>
      <eui-toolbar-app
        appName="MyWorkplace"
        appSubTitle="Dashboard">
      </eui-toolbar-app>
    </eui-toolbar>
  </eui-app-toolbar>
</eui-app>

Accessibility

  • Application name provides primary identification
  • Subtitle offers additional context
  • Text content readable by screen readers
  • Semantic structure for application branding

Notes

  • Must be used within eui-toolbar for proper layout
  • Positioned in toolbar content area
  • Simpler alternative to eui-header-app
  • Designed for toolbar-specific layouts
  • appName for primary application title
  • appSubTitle for additional context (optional)
  • Both inputs are optional
  • Compact design suitable for toolbar height
  • No integration with EuiAppShellService (unlike eui-header-app)
  • Use when toolbar is primary navigation instead of header

Metadata

encapsulation ViewEncapsulation.None
selector eui-toolbar-app
templateUrl ./toolbar-app.component.html

Index

Properties
Inputs
HostBindings

Inputs

appName
Type : string

Application name displayed in the toolbar. Provides the primary application identifier for toolbar branding. Optional.
appSubTitle
Type : string

Subtitle or descriptive text displayed below the application name. Provides additional context about the application, current section, or user role. Optional.

HostBindings

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

Properties

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

results matching ""

    No results matching ""