AppHeader

AppHeader defines the top navigation bar of your application within the App component. It automatically handles logo placement, application title, and user profile areas with built-in responsive behavior.

Key features:

Logo customization: Use logoTemplate to create rich logo designs beyond simple images
Profile menu: Add user authentication displays, settings menus, or action buttons via profileMenuTemplate
Layout integration: Automatically positioned and styled based on your App's layout property

Properties

`logoTemplate`

This property defines the template to use for the logo. With this property, you can construct your custom logo instead of using a single image.

<App>
  <AppHeader>
  <property name="logoTemplate">
    <H3>
      <Icon name="drive" />
      DriveDiag
    </H3>
  </property>
  </AppHeader>
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
    <NavLink label="Page 1" to="/page1"/>
  </NavPanel>
  <Pages fallbackPath="/">
    <Page url="/">
      <Text value="Home" />
    </Page>
    <Page url="/page1">
      <Text value="Page 1" />
    </Page>
  </Pages>
</App>

Example: logoTemplate

<App>
  <AppHeader>
  <property name="logoTemplate">
    <H3>
      <Icon name="drive" />
      DriveDiag
    </H3>
  </property>
  </AppHeader>
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
    <NavLink label="Page 1" to="/page1"/>
  </NavPanel>
  <Pages fallbackPath="/">
    <Page url="/">
      <Text value="Home" />
    </Page>
    <Page url="/page1">
      <Text value="Page 1" />
    </Page>
  </Pages>
</App>

`profileMenuTemplate`

This property makes the profile menu slot of the AppHeader component customizable.

This property makes the profile menu slot of the AppHeader component customizable. It accepts component definitions.

<App>
  <AppHeader>
    <property name="profileMenuTemplate">
      <DropdownMenu>
        <property name="triggerTemplate">
          <Avatar name="Joe" size="xs" borderRadius="50%"/>
        </property>
      </DropdownMenu>
    </property>
  </AppHeader>
</App>

Example: profileMenuTemplate

<App>
  <AppHeader>
    <property name="profileMenuTemplate">
      <DropdownMenu>
        <property name="triggerTemplate">
          <Avatar name="Joe" size="xs" borderRadius="50%"/>
        </property>
      </DropdownMenu>
    </property>
  </AppHeader>
</App>

`showLogo` (default: true)

Show the logo in the header

`title`

Title for the application logo

`titleTemplate`

This property defines the template to use for the title. With this property, you can construct your custom title instead of using a single image.

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
alignment-content-AppHeader	none	none
backgroundColor-AppHeader	$color-surface-raised	$color-surface-raised
border-AppHeader	none	none
borderBottom-AppHeader	1px solid $borderColor	1px solid $borderColor
borderBottomColor-AppHeader	none	none
borderBottomStyle-AppHeader	none	none
borderBottomWidth-AppHeader	none	none
borderColor-AppHeader	none	none
borderEndEndRadius-AppHeader	none	none
borderEndStartRadius-AppHeader	none	none
borderHorizontal-AppHeader	none	none
borderHorizontalColor-AppHeader	none	none
borderHorizontalStyle-AppHeader	none	none
borderHorizontalWidth-AppHeader	none	none
borderLeft-AppHeader	none	none
color-AppHeader	none	none
borderLeftStyle-AppHeader	none	none
borderLeftWidth-AppHeader	none	none
borderRadius-AppHeader	0px	0px
borderRight-AppHeader	none	none
color-AppHeader	none	none
borderRightStyle-AppHeader	none	none
borderRightWidth-AppHeader	none	none
borderStartEndRadius-AppHeader	none	none
borderStartStartRadius-AppHeader	none	none
borderStyle-AppHeader	none	none
borderTop-AppHeader	none	none
borderTopColor-AppHeader	none	none
borderTopStyle-AppHeader	none	none
borderTopWidth-AppHeader	none	none
borderHorizontal-AppHeader	none	none
borderVerticalColor-AppHeader	none	none
borderVerticalStyle-AppHeader	none	none
borderVerticalWidth-AppHeader	none	none
borderWidth-AppHeader	none	none
height-AppHeader	$space-14	$space-14
maxWidth-AppHeader	$maxWidth-App	$maxWidth-App
maxWidth-content-AppHeader	$maxWidth-content-App	$maxWidth-content-App
padding-AppHeader	$paddingTop-AppHeader $paddingRight-AppHeader $paddingBottom-AppHeader $paddingLeft-AppHeader	$paddingTop-AppHeader $paddingRight-AppHeader $paddingBottom-AppHeader $paddingLeft-AppHeader
padding-drawerToggle-AppHeader	$space-0_5	$space-0_5
padding-logo-AppHeader	$paddingTop-logo-AppHeader $paddingRight-logo-AppHeader $paddingBottom-logo-AppHeader $paddingLeft-logo-AppHeader	$paddingTop-logo-AppHeader $paddingRight-logo-AppHeader $paddingBottom-logo-AppHeader $paddingLeft-logo-AppHeader
paddingBottom-AppHeader	$paddingVertical-AppHeader	$paddingVertical-AppHeader
paddingBottom-logo-AppHeader	$paddingVertical-logo-AppHeader	$paddingVertical-logo-AppHeader
paddingHorizontal-AppHeader	$space-4	$space-4
paddingHorizontal-logo-AppHeader	$space-0	$space-0
paddingLeft-AppHeader	$paddingHorizontal-AppHeader	$paddingHorizontal-AppHeader
paddingLeft-logo-AppHeader	$paddingHorizontal-logo-AppHeader	$paddingHorizontal-logo-AppHeader
paddingRight-AppHeader	$paddingHorizontal-AppHeader	$paddingHorizontal-AppHeader
paddingRight-logo-AppHeader	$paddingHorizontal-logo-AppHeader	$paddingHorizontal-logo-AppHeader
paddingTop-AppHeader	$paddingVertical-AppHeader	$paddingVertical-AppHeader
paddingTop-logo-AppHeader	$paddingVertical-logo-AppHeader	$paddingVertical-logo-AppHeader
paddingVertical-AppHeader	$space-0	$space-0
paddingVertical-logo-AppHeader	$space-0	$space-0
width-logo-AppHeader	none	none

Variable Explanations

Theme Variable	Description
`padding‑logo‑AppHeader`	This theme variable sets the padding of the logo in the app header (including all `padding` variants, such as `paddingLeft-logo-AppHeader` and others).
`width‑logo‑AppHeader`	Sets the width of the displayed logo