Page Header

The Page Header gives every screen a consistent top zone: a breadcrumb trail for context, a bold page title and a muted subtitle. Dropping it at the top of each content area makes a multi-screen app feel coherent and helps users always know where they are.

Palette:

Original palette · works in every Power Apps locale

Paste directly into Power Apps Studio

Accueil / Section / Page actuelle

Titre de la page

Sous-titre ou description de la section.

YAML source

- PageHeader:
    Control: GroupContainer
    Variant: ManualLayout
    Properties:
      DropShadow: =DropShadow.None
      Fill: =RGBA(0, 0, 0, 0)
      Height: =110
      Width: =1000
    Children:
      - PageHeaderBreadcrumb:
          Control: Text
          Properties:
            Font: =Font.'Segoe UI'
            FontColor: =RGBA(120, 120, 120, 1)
            Height: =20
            PaddingLeft: =30
            Size: =11
            Text: ="Accueil  /  Section  /  Page actuelle"
            Width: =700
            X: =0
            Y: =18
      - PageHeaderTitle:
          Control: Text
          Properties:
            Font: =Font.'Segoe UI'
            FontColor: =RGBA(30, 30, 30, 1)
            Height: =44
            PaddingLeft: =30
            PaddingTop: =4
            Size: =24
            Text: ="Titre de la page"
            Weight: ='TextCanvas.Weight'.Bold
            Width: =700
            X: =0
            Y: =36
      - PageHeaderSubtitle:
          Control: Text
          Properties:
            Font: =Font.'Segoe UI'
            FontColor: =RGBA(90, 90, 90, 1)
            Height: =28
            PaddingLeft: =30
            Size: =13
            Text: ="Sous-titre ou description de la section."
            Width: =800
            X: =0
            Y: =80

Common use cases

Screen-level context

Use the breadcrumb to show the path (Home / Section / Page) and reinforce the app's structure.

Section titles

Provide a clear H1-equivalent title and a one-line description of what the screen does.

Consistent templates

Reuse it across every screen so headers align pixel-for-pixel throughout the app.

How to use Page Header in Power Apps

1Open the component page — the YAML uses the invariant Power Fx syntax and works in every Power Apps locale.
2Click "Copy YAML" to copy the full component definition to your clipboard.
3In Power Apps Studio, open your screen in the Tree view and paste (Ctrl+V) — the component appears ready to use.
4Rebind the data-driven properties (Items, OnSelect, Fill, Text) to your own data source and theme.

Tip — Bind the breadcrumb segments to variables so the header updates automatically as users navigate deeper.