Breadcrumbs

A hierarchical breadcrumb trail with inline SVG icons, configurable separators, smart ellipsis collapse, optional back button mode, and pixel-perfect text measurement. Supports up to 5 levels.

cmpBreadcrumbs.yaml

Import via Components → New component → Import from code → paste YAML

Power Apps Studio rendering note

After importing, the component may appear incomplete in the Studio editor until you press F5 (Preview) or publish. This is standard Power Apps behavior for YAML-imported components — the editor doesn't fully evaluate dynamic width calculations until a preview cycle. End users always see the fully rendered component.

Preview

Dashboard

MacBook Pro #A-1042

Checkout History

Installation

This component requires Modern controls to be enabled. Settings → Updates → Preview → Modern controls and themes

# In Power Apps Studio:
1. Components tab → New component → Import from code
2. Paste the full YAML definition
3. Add the component to any screen
4. Press F5 (Preview) to see the fully rendered component

Usage

Define breadcrumb items

// Items — each crumb needs id and label
// icon and appendIcon accept inline SVG or emoji

cmpBreadcrumbs.Items = Table(
    { id: "1", label: "Home",
      icon: "<svg ...>...</svg>" },
    { id: "2", label: "Products",
      icon: "🛒",
      appendIcon: "<svg ...chevron-down...</svg>" },
    { id: "3", label: "Laptops" },
    { id: "4", label: "MacBook Pro #A-1042" }
)

Configure via the Config record

// Config is a single record with all settings
// Only override the fields you need — defaults apply

cmpBreadcrumbs.Config = {
    Theme: "light",           // "light" or "dark"
    SeparatorIcon: "chevron", // "chevron", "slash", or "dot"
    Gap: 4,                   // spacing between items
    Size: 12,                 // font size in px
    MaxItems: 4,              // 0 = show all, >0 = collapse
    ItemsBeforeCollapse: 1,   // items shown before "..."
    ItemsAfterCollapse: 2,    // items shown after "..."
    ActiveLastItem: false,    // make last item clickable
    BackButton: false         // replace first item with ← Back
}

Handle selection and navigation

// OnSelect — fires when any crumb is clicked
// SelectedItem output contains the full record

cmpBreadcrumbs.OnSelect = Navigate(
    LookUp(colScreenMap,
        id = cmpBreadcrumbs.SelectedItem.id
    ).Screen
)

// OnBack — fires when back button is clicked
// (only when Config.BackButton = true)
cmpBreadcrumbs.OnBack = Back()

Properties

Input

Property	Type	Default
`Items` Breadcrumb items (id, label, icon, appendIcon)	Table	See default
`Config` Settings record: Theme, SeparatorIcon, Size, MaxItems, BackButton, etc.	Record	See Config
`CurrentColor` Hex color for the current (last) item	Text	"#111827"
`LinkColor` Hex color for clickable breadcrumb items	Text	"#64748B"
`Icons` Record of SVG strings: Home, Chevron, Slash, Dot, Back, ChevronDown	Record	Built-in SVGs
`CharWidths` Character width lookup table for pixel-perfect text sizing	Table	Segoe UI widths

Output

Property	Type	Description
`SelectedItem`	Record	The full record of the last clicked breadcrumb item (id, label, icon, appendIcon).

Events

Event	Description
`OnSelect`	Fires when any breadcrumb item is clicked. Use SelectedItem to determine which.
`OnBack`	Fires when the back button is clicked (only active when Config.BackButton = true).

Implementation Details

Fixed slot architecture (no gallery)

Unlike most list-based components, this breadcrumb uses 5 fixed item slots (cntItem1–cntItem5) rather than a gallery. Each slot checks CountRows(Items) >= N for visibility. This avoids gallery template limitations and enables per-item width calculation, but caps the trail at 5 levels.

Pixel-perfect text measurement

Each label's width is calculated using the CharWidths lookup table. The formula splits the label text into individual characters, looks up each character's width for Segoe UI Semibold, sums the results, and applies a 1.1× multiplier plus 8px padding. This gives precise width without wrapping or overflow.

Ellipsis collapse with expand

When Config.MaxItems > 0 and the item count exceeds it, middle items collapse behind a clickable “…” button. The collapse respects ItemsBeforeCollapse (default 1) and ItemsAfterCollapse (default 2). Clicking the ellipsis sets _bcExpanded to reveal all items.

Inline SVG icon system

Icons accept three formats: raw <svg> strings (the currentColor keyword is replaced with the appropriate link/current color), data: URIs, or plain text/emoji (wrapped in an SVG text element). Each item supports both a leading icon and a trailing appendIcon (useful for dropdown indicators).

Back button mode

Setting Config.BackButton = true replaces the entire trail with a single “← Back” link that fires the OnBack event. Useful for mobile views or deep detail pages where the full trail is unnecessary.

Config record pattern

All behavioral settings are bundled into a single Config record rather than individual properties. This reduces the property count in Power Apps Studio and lets you override only the fields you need — unlisted fields use their defaults.

Examples

E-commerce with auto-collapse

HomeLaptopsGaming

// Deep category path — auto-collapses
cmpBreadcrumbs.Items = Table(
    { id: "1", label: "Home", icon: "🏠" },
    { id: "2", label: "Electronics" },
    { id: "3", label: "Computers" },
    { id: "4", label: "Laptops" },
    { id: "5", label: "Gaming" }
)
cmpBreadcrumbs.Config = {
    MaxItems: 4,
    ItemsBeforeCollapse: 1,
    ItemsAfterCollapse: 2
}

Dark theme with slash separators

Settings/Account/Privacy

// Dark theme, slash separators
cmpBreadcrumbs.Items = Table(
    { id: "1", label: "Settings" },
    { id: "2", label: "Account" },
    { id: "3", label: "Privacy" }
)
cmpBreadcrumbs.Config = {
    Theme: "dark",
    SeparatorIcon: "slash",
    MaxItems: 0
}
cmpBreadcrumbs.CurrentColor = "#F1F5F9"
cmpBreadcrumbs.LinkColor = "#94A3B8"

Back button mode

Back

// Back button replaces the trail
cmpBreadcrumbs.Config = {
    BackButton: true
}

// OnBack event (not OnSelect)
cmpBreadcrumbs.OnBack = Back()

// Tip: toggle BackButton based on
// screen width for responsive behavior
cmpBreadcrumbs.Config = {
    BackButton: App.Width < 600
}

Data Schema

Items record

Field	Type	Notes
id	Text	Unique identifier for the breadcrumb item.
label	Text	Display text. Width is auto-calculated via CharWidths.
icon	Text	Optional. Inline SVG, data: URI, or emoji. Appears before label.
appendIcon	Text	Optional. Trailing icon (e.g. chevron-down for dropdowns).

Config record

Field	Type	Default	Notes
Theme	Text	"light"	"light" or "dark"
SeparatorIcon	Text	"chevron"	"chevron", "slash", or "dot"
Gap	Number	4	Spacing between items in px
Size	Number	12	Font size in px
MaxItems	Number	4	0 = show all, >0 = collapse middle items
ItemsBeforeCollapse	Number	1	Items visible before the ellipsis
ItemsAfterCollapse	Number	2	Items visible after the ellipsis
ActiveLastItem	Boolean	false	Makes the last (current) item clickable
BackButton	Boolean	false	Replaces trail with ← Back link

Architecture

41 controls — 5 fixed item slots + ellipsis group + 6 separator images in a horizontal AutoLayout.

9 properties — 6 input, 1 output, 2 events.

cmpBreadcrumbs (40px tall, 800px default width)
└── cntBreadcrumbsWrapper (AutoLayout Horizontal, scroll overflow)
    ├── cntItem1 (slot 1 — always visible if Items ≥ 1)
    │   ├── cntContent1 (AutoLayout: icon + label + appendIcon)
    │   │   ├── imgIcon1 (leading SVG icon)
    │   │   ├── lblText1 (auto-width via CharWidths lookup)
    │   │   └── imgAppend1 (trailing icon, e.g. chevron-down)
    │   └── btnClick1 (transparent hit target)
    ├── imgSep1 (separator: chevron / slash / dot)
    ├── cntEllipsis (visible when MaxItems > 0 and overflow)
    │   ├── lblEllipsis ("...")
    │   └── btnEllipsis (toggles _bcExpanded)
    ├── imgSepEllipsis
    ├── cntItem2 ... cntItem5 (same pattern as cntItem1)
    └── imgSep2 ... imgSep5