Spread Routes

A [...operator] catch-all route that handles arbitrary depth. The breadcrumb label is derived from the last segment of the path.

Try these routes

• /spread
• /spread/users
• /spread/users/42
• /spread/users/42/settings

Current path: users / 42

Multi-route breadcrumb from a single page

Instead of exporting a single resolver, the breadcrumb export uses the { routes } form to define resolvers for multiple route patterns from one file.

<script module lang="ts">
	export const breadcrumb: BreadcrumbMeta = {
	  routes: {
	    '/spread': async () => ({ label: 'Spread' }),
	    '/spread/[...operator]': async (_page, url) => {
	      // url is the breadcrumb's own path, e.g. "/spread/users/42"
	      const lastSegment = url.split('/').pop() ?? 'overview';
	      return { label: lastSegment };
	    }
	  }
	};
</script>

How it works

A [...operator] spread route matches paths of any depth. The resolver receives the breadcrumb's own URL as the second argument, so each segment gets the correct label (e.g. the breadcrumb at /spread/users/42 receives that exact path, not the full page.params). This is useful for routes where the depth is not known ahead of time — file browsers, nested categories, or operator trees.