> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Sample Flows

## Article: Sample Flows

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/pages-and-navigation/pages/sample-flows.md

## Article Content:

# Pages API: Sample Flows

This article presents possible use cases and corresponding sample flows that you can support. It provides a useful starting point as you plan your implementation.

## Build a breadcrumb trail for the current page

To build a breadcrumb trail for the current page, follow these steps:

1. Index the pages by slug, so you can look up each parent page by its `parentSlug`:

   ```ts
   import type { PageConfig } from '@wix/site-service-pages/types'

   const { currentPage, mainPage, pages } = pagesService
   const pagesBySlug = new Map(Object.values(pages).map((page) => [page.slug, page]))
   ```

2. Start the trail with the current page, and keep a set of the slugs already in the trail:

   ```ts
   const trail: PageConfig[] = [currentPage]
   const visited = new Set([currentPage.slug])
   ```

3. Walk up through each page's `parentSlug`, adding each parent to the start of the trail. Stop when a parent isn't in `pages` or is already in the trail, so a broken parent chain can't loop forever:

   ```ts
   let parent = currentPage.parentSlug ? pagesBySlug.get(currentPage.parentSlug) : undefined
   while (parent && !visited.has(parent.slug)) {
       trail.unshift(parent)
       visited.add(parent.slug)
       parent = parent.parentSlug ? pagesBySlug.get(parent.parentSlug) : undefined
   }
   ```

4. Put the main page first, unless the trail already starts with it:

   ```ts
   if (trail[0].slug !== mainPage.slug) {
       trail.unshift(mainPage)
   }
   ```

5. Build each page's link from the site root URL, `siteUrl` in `@wix/site-service-url`, and the page's `path`. Link the main page to the site root URL itself, which is where site visitors reach it:

   ```ts
   const hrefFor = (page: PageConfig) =>
       page.slug === mainPage.slug ? urlService.siteUrl : `${urlService.siteUrl}/${page.path}`
   ```

6. Render the trail, labeling each entry with its `title`. Show the current page, the last entry, as text rather than a link:

   ```tsx
   return (
       <nav aria-label="Breadcrumb">
           {trail.map((page, index) =>
               index === trail.length - 1
                   ? <span key={page.slug}>{page.title}</span>
                   : <a key={page.slug} href={hrefFor(page)}>{page.title}</a>
           )}
       </nav>
   )
   ```

## Adapt a component shown in a popup

To adapt a component shown in a popup, follow these steps:

1. Read `popup` from `currentPage`. For a component shown in a popup, the current page is the popup:

   ```ts
   const inPopup = pagesService.currentPage.popup
   ```

2. Render only the form, your own `SignUpForm` component, in a popup, or the form with a heading and a description on a page:

   ```tsx
   if (inPopup) {
       return <SignUpForm />
   }

   return (
       <section>
           <h2>Join our newsletter</h2>
           <p>Hear about new collections first.</p>
           <SignUpForm />
       </section>
   )
   ```