Page header

A page title band with a clickable breadcrumb, status badge, subtitle and Edit and primary action buttons on the right.

Overview

The top of a detail page: a breadcrumb back to where people came from, a large title with a status badge, a muted subtitle and the page's actions on the right. It sits on a white band with a thin border, the full width of its parent.

The breadcrumb items are text links that run OnSelect; the last item is the current page, in muted text, and repeats the title. The title is as wide as its text, so the badge sits right next to it.

When to use

Detail and edit screens that are one or two levels deep, where people need the way back.
Pages with one main action and one or two secondary ones.

When not to use

The app's top bar with search and the user's avatar: use the app header.
Pages with many actions: use a command bar, or move the rarer actions into a menu.

Controls used

Control	Version
GroupContainer	`1.5.0`
ModernText	`1.0.0`
ModernIcon	`1.1.1`
ModernBadge	`1.0.0`
ModernButton	`1.0.0`

YAML

Works as is, with example data inline. Paste it into a screen or container; the steps are underHow to paste.

Not yet verified in Power Apps Studio. The control versions are drafted from documentation. If Studio flags one, see How to paste for the fix.

component.yaml

- PageHeaderRoot:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      BorderColor: =ColorFade(App.Theme.Colors.Darker70, 88%)
      BorderThickness: =1
      DropShadow: =DropShadow.None
      Fill: =Color.White
      Height: =PageHeaderBreadcrumb.Height + PageHeaderMain.Height + 12 + 40
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =12
      PaddingBottom: =20
      PaddingLeft: =24
      PaddingRight: =24
      PaddingTop: =20
      RadiusBottomLeft: =0
      RadiusBottomRight: =0
      RadiusTopLeft: =0
      RadiusTopRight: =0
      Width: =Parent.Width
    Children:
      - PageHeaderBreadcrumb:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =24
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =4
            LayoutMinHeight: =24
            LayoutMinWidth: =120
          Children:
            - PageHeaderCrumbHome:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: ="Go to " & Self.Text
                  Color: =App.Theme.Colors.Primary
                  Height: =24
                  LayoutMinHeight: =0
                  LayoutMinWidth: =0
                  OnSelect: =Notify("Go to Home (example only).", NotificationType.Information)
                  PaddingBottom: =0
                  PaddingLeft: =0
                  PaddingRight: =0
                  PaddingTop: =0
                  Size: =13
                  Text: ="Home"
                  Width: =40
                  Wrap: =false
            - PageHeaderCrumbChevron1:
                Control: ModernIcon@1.1.1
                Properties:
                  AccessibleLabel: ="then"
                  Height: =14
                  Icon: ="ChevronRight"
                  IconColor: =ColorFade(App.Theme.Colors.Darker70, 55%)
                  LayoutMinHeight: =14
                  LayoutMinWidth: =14
                  Width: =14
            - PageHeaderCrumbSection:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: ="Go to " & Self.Text
                  Color: =App.Theme.Colors.Primary
                  Height: =24
                  LayoutMinHeight: =0
                  LayoutMinWidth: =0
                  OnSelect: =Notify("Go to Inspections (example only).", NotificationType.Information)
                  PaddingBottom: =0
                  PaddingLeft: =0
                  PaddingRight: =0
                  PaddingTop: =0
                  Size: =13
                  Text: ="Inspections"
                  Width: =74
                  Wrap: =false
            - PageHeaderCrumbChevron2:
                Control: ModernIcon@1.1.1
                Properties:
                  AccessibleLabel: ="then"
                  Height: =14
                  Icon: ="ChevronRight"
                  IconColor: =ColorFade(App.Theme.Colors.Darker70, 55%)
                  LayoutMinHeight: =14
                  LayoutMinWidth: =14
                  Width: =14
            - PageHeaderCrumbCurrent:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: ="Current page, " & Self.Text
                  Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                  FillPortions: =1
                  Height: =24
                  LayoutMinHeight: =0
                  LayoutMinWidth: =60
                  PaddingBottom: =0
                  PaddingLeft: =0
                  PaddingRight: =0
                  PaddingTop: =0
                  Size: =13
                  Text: =PageHeaderTitle.Text
                  Wrap: =false
      - PageHeaderMain:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =60
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =16
            LayoutMinHeight: =60
            LayoutMinWidth: =120
          Children:
            - PageHeaderText:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =1
                  Height: =60
                  LayoutDirection: =LayoutDirection.Vertical
                  LayoutGap: =4
                  LayoutMinHeight: =60
                  LayoutMinWidth: =120
                Children:
                  - PageHeaderTitleRow:
                      Control: GroupContainer@1.5.0
                      Variant: AutoLayout
                      Properties:
                        AlignInContainer: =AlignInContainer.Stretch
                        DropShadow: =DropShadow.None
                        FillPortions: =0
                        Height: =34
                        LayoutAlignItems: =LayoutAlignItems.Center
                        LayoutDirection: =LayoutDirection.Horizontal
                        LayoutGap: =12
                        LayoutMinHeight: =34
                        LayoutMinWidth: =120
                      Children:
                        - PageHeaderTitle:
                            Control: ModernText@1.0.0
                            Properties:
                              AccessibleLabel: =Self.Text
                              FontWeight: =FontWeight.Semibold
                              Height: =34
                              LayoutMinHeight: =0
                              LayoutMinWidth: =80
                              PaddingBottom: =0
                              PaddingLeft: =0
                              PaddingRight: =0
                              PaddingTop: =0
                              Size: =24
                              Text: ="Warehouse Ghent"
                              Width: =Min(Len(Self.Text) * 13 + 8, Parent.Width - 140)
                              Wrap: =false
                        - PageHeaderBadge:
                            Control: ModernBadge@1.0.0
                            Properties:
                              AccessibleLabel: ="Status in progress"
                              Appearance: =BadgeAppearance.Tint
                              Content: ="In progress"
                              Height: =24
                              Intent: =BadgeIntent.Informative
                              LayoutMinHeight: =24
                              LayoutMinWidth: =80
                              Size: =12
                              Width: =92
                  - PageHeaderSubtitle:
                      Control: ModernText@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        AlignInContainer: =AlignInContainer.Stretch
                        Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                        Height: =22
                        LayoutMinHeight: =0
                        LayoutMinWidth: =80
                        PaddingBottom: =0
                        PaddingLeft: =0
                        PaddingRight: =0
                        PaddingTop: =0
                        Size: =14
                        Text: ="Fire safety audit · due 15 October · Sara Peeters"
                        Wrap: =false
            - PageHeaderActions:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =0
                  Height: =40
                  LayoutAlignItems: =LayoutAlignItems.Center
                  LayoutDirection: =LayoutDirection.Horizontal
                  LayoutGap: =8
                  LayoutJustifyContent: =LayoutJustifyContent.End
                  LayoutMinHeight: =40
                  LayoutMinWidth: =120
                  Width: =PageHeaderSecondary.Width + PageHeaderPrimary.Width + 8
                Children:
                  - PageHeaderSecondary:
                      Control: ModernButton@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        Appearance: =ButtonAppearance.Secondary
                        Height: =40
                        Icon: ="Edit"
                        LayoutMinHeight: =40
                        LayoutMinWidth: =96
                        OnSelect: =Notify("Edit (example only).", NotificationType.Information)
                        Size: =14
                        Text: ="Edit"
                        Width: =96
                  - PageHeaderPrimary:
                      Control: ModernButton@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        Appearance: =ButtonAppearance.Primary
                        Height: =40
                        Icon: ="CheckmarkCircle"
                        LayoutMinHeight: =40
                        LayoutMinWidth: =120
                        OnSelect: =Notify("Completed (example only).", NotificationType.Success)
                        Size: =14
                        Text: ="Complete"
                        Width: =128

Make it yours

The example runs on sample data. Replace these properties to connect it to your app.

`Text` on `PageHeaderTitle`

The name of the record or page. The last breadcrumb item repeats it, so you only change it here.

In the YAML

YAML

Text: ="Warehouse Ghent"

Your version

YAML

Text: =InspectionsGallery.Selected.Title

`Text` on `PageHeaderSubtitle`

One line of context under the title.

In the YAML

YAML

Text: ="Fire safety audit · due 15 October · Sara Peeters"

Your version

YAML

Text: =InspectionsGallery.Selected.Type & " · due " & Text(InspectionsGallery.Selected.'Due date', "d mmmm")

`Content` on `PageHeaderBadge`

The record's status. Change Intent with it, for example BadgeIntent.Positive for done, and the AccessibleLabel.

In the YAML

YAML

Content: ="In progress"

Your version

YAML

Content: =InspectionsGallery.Selected.Status

`OnSelect` on `PageHeaderCrumbSection`

Where the middle breadcrumb goes. Do the same for PageHeaderCrumbHome. The breadcrumb items have a fixed Width; change it when you change their Text.

In the YAML

YAML

OnSelect: =Notify("Go to Inspections (example only).", NotificationType.Information)

Your version

YAML

OnSelect: =Navigate(InspectionsScreen, ScreenTransition.None)

`OnSelect` on `PageHeaderPrimary`

The main action on this page. Keep one primary button; the other actions stay secondary.

In the YAML

YAML

OnSelect: =Notify("Completed (example only).", NotificationType.Success)

Your version

YAML

OnSelect: |
  =Patch(Inspections, InspectionsGallery.Selected, {Status: "Done"});
  Notify("Inspection completed", NotificationType.Success)

How to paste

Open your app in Power Apps Studio.
Check that modern controls are on: Settings → Updates → Modern controls and themes. In newer environments they are on by default.
Copy the YAML with the Copy button above the code.
In the Tree view, select the screen or container that should hold the component and press Ctrl+V. The whole component arrives as one container, PageHeaderRoot, with all its controls inside.
Work through Make it yours to swap the example data for your own.

Where your version of Studio has a code view for a control or screen, you can paste the same YAML there instead of into the tree view.

When Studio flags a control version

Each control in the YAML names its version, like Control: ModernButton@1.0.0. If that version is newer than what your environment knows, Studio falls back to the version it has or flags the control. All controls of one type in an app must also use the same version, so an app that already has an older ModernButton can reject the paste. To fix it, insert the same control from the Insert pane, copy it as code, note the version on its Control: line, update every matching line in the YAML and paste again.

Missing a component, or did this one not paste cleanly? Suggest a component or report an issue.

Page header

Overview

When to use

When not to use

Controls used

YAML

Make it yours

Text on PageHeaderTitle

Text on PageHeaderSubtitle

Content on PageHeaderBadge

OnSelect on PageHeaderCrumbSection

OnSelect on PageHeaderPrimary

How to paste

When Studio flags a control version

`Text` on `PageHeaderTitle`

`Text` on `PageHeaderSubtitle`

`Content` on `PageHeaderBadge`

`OnSelect` on `PageHeaderCrumbSection`

`OnSelect` on `PageHeaderPrimary`