AppHeader

AppHeader is a placeholder within App to define a custom application header.

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.

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 defaultRoute="/">
    <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>

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 Explanations