Copy page

Components

AppPageBreadcrumb

src/lib/components/AppPageBreadcrumb.svelte

Purpose

Renders ancestor breadcrumb segments (the current page title is shown separately, e.g. in an h1). Each segment is either a plain link, a static label, or a menu segment that opens a DropdownMenu of sibling destinations (selecting one calls goto). A trailing / separator is always rendered after the last segment. Built on the shadcn-svelte™ Breadcrumb and DropdownMenu primitives.

Origin

Custom — Primebrick-written, using shadcn-svelte™ Breadcrumb and DropdownMenu primitives plus @lucide/svelte ChevronDown.

Usage

Default

Code
<script lang="ts">
  import AppPageBreadcrumb from '$lib/components/AppPageBreadcrumb.svelte';
  import type { AppBreadcrumbSegment } from '$lib/breadcrumb/types';

  const segments: AppBreadcrumbSegment[] = [
    { label: 'Settings', href: '/system/settings' }
  ];
</script>

<AppPageBreadcrumb {segments} />

The root-level segment (System, CRM, …) is prepended automatically by the component — pages never declare it themselves. It follows the route's root (shellNav.rootForRoute(pathname) — the URL's first segment), not the module's part_of: a crm page at /system/crm/pipeline shows System / CRM / …. Each menu item navigates to that app's declared is_default module home. Result: {app} / {module-level segments…}.

Module pages — the mechanical contract

Module-owned pages never hand-build the middle segments: they call moduleBreadcrumbSegments({ pathname, t }) from $lib/breadcrumb/module-breadcrumb, which returns exactly two segments from shellNav.moduleNav (the module's declared endpoints.nav):

1. module — plain link labeled with the module's localized display name (service_registry.label_key), pointing at the module's home within the route's root (first nav item of that root's slice).
2. page — dropdown labeled with the current page's nav label (longest-prefix match), listing the module's sibling pages in the same root with the current one marked.

Each segment renders an icon from the same source of truth as the app launcher — never declared per-page:

segment	icon source
{app} (root)	APP_ROOT_ICON ($lib/shell/app-icons) — shared with the launcher's apps column
{module}	service_registry.icon (fallback layout-grid)
{page} / menu items	the nav item's declared icon (fallback circle)

Detail/create pages append their own trailing segment, so the rendered shape is always {app} / {module} / {page} [/ {detail}]:

Code
<AppPageBreadcrumb
  segments={[
    ...moduleBreadcrumbSegments({ pathname: page.url.pathname, t: (k) => $t(k) }),
    { label: $t('system.entities.customer.new.title') } // create/detail only
  ]}
/>

Remote ESM pages receive the same function via mountPage host components (c.moduleBreadcrumbSegments).

With a menu segment (sibling switcher)

Code
<script lang="ts">
  import { isMenuSegment, type AppBreadcrumbSegment } from '$lib/breadcrumb/types';

  const segments: AppBreadcrumbSegment[] = [
    {
      label: 'Settings',
      menuAriaLabel: 'Switch settings section',
      items: [
        { label: 'Profile', href: '/system/settings/profile', current: true },
        { label: 'Configurations', href: '/system/settings/configurations', current: false }
      ]
    }
  ];
</script>

<AppPageBreadcrumb {segments} />

Empty (no segments)

When segments is empty, nothing renders.

Code
<AppPageBreadcrumb segments={[]} />

Props

Full prop table: see API reference — apppagebreadcrumb.

Key props: segments: AppBreadcrumbSegment[] (ancestor segments only).

Next steps

• Component catalog
• UI stack
• API reference