List / Browse Layout

The List / Browse Layout is a responsive screen skeleton for any browse experience: a top bar, a toolbar region for search, filters and a view toggle, and a large scrollable list area below. Pure containers with no dependencies — drop in the Search Bar, Filter Chips and a gallery to assemble a full browse screen in minutes.

Power Apps locale:

Paste directly into Power Apps Studio

YAML source

# List / Browse Layout — PowerBlocks (FREE)
# Top bar + a toolbar (search + filter + view toggle) + a scrollable list/gallery area.
# RESPONSIVE: this is a pure-container skeleton — no data, no dependencies.
# Drop your PowerBlocks components into each region. For breakpoints, add to
# Screen.OnVisible:  UpdateContext({ locIsMobile: Parent.Width < 768 })
# then switch the region X/Y/Width with If(locIsMobile, ...) to stack on small screens.

- ListBrowseLayout:
    Control: GroupContainer@1.3.0
    Variant: ManualLayout
    Properties:
      X: =0
      Y: =0
      Width: =Parent.Width
      Height: =Parent.Height
      Fill: =RGBA(10, 10, 10, 1)
    Children:
      - LbTopBar:
          Control: GroupContainer@1.3.0
          Variant: ManualLayout
          Properties:
            X: =24
            Y: =24
            Width: =Parent.Width - 48
            Height: =56
            Fill: =RGBA(23, 31, 46, 1)
            RadiusTopLeft: =14
            RadiusTopRight: =14
            RadiusBottomLeft: =14
            RadiusBottomRight: =14
      - LbToolbar:
          Control: GroupContainer@1.3.0
          Variant: ManualLayout
          Properties:
            X: =24
            Y: =96
            Width: =Parent.Width - 48
            Height: =48
      - LbList:
          Control: GroupContainer@1.3.0
          Variant: ManualLayout
          Properties:
            X: =24
            Y: =160
            Width: =Parent.Width - 48
            Height: =Parent.Height - 184
            Fill: =RGBA(23, 31, 46, 1)
            RadiusTopLeft: =14
            RadiusTopRight: =14
            RadiusBottomLeft: =14
            RadiusBottomRight: =14

Common use cases

Catalogues & directories

Browse products, people or documents with search and filters up top.

Record lists

A clean home for any gallery with a consistent toolbar above it.

Search-first screens

Lead with a prominent search/filter bar over a results list.

How to use List / Browse Layout in Power Apps

1Click "Copy YAML" and paste the layout onto a blank screen.
2Drop the Search Bar and Filter Chips into the toolbar region.
3Drop a gallery (or the Data Table) into the list area and bind it to your filtered data.
4Add a breakpoint so the toolbar wraps on small screens.

Tip — This is the layout behind the Record Browser screen — start here if you want to arrange the pieces yourself.

More layouts

FREE

Dashboard Layout

FREE

Master-Detail Layout