# CustomerLayout (https://docs.salla.dev/twilight/react/layouts/customer-layout)



<Callout title="Framework: TanStack Start">
  This page is written for TanStack Start, the default and currently supported framework. [See what depends on the framework](https://docs.salla.dev/twilight/react/start/frameworks).
</Callout>

`CustomerLayout` is the frame around the customer's account: profile, orders, wishlist, wallet, notifications and settings. It sits inside [`MasterLayout`](https://docs.salla.dev/twilight/react/layouts/master-layout), so the header and footer stay.

## What it draws [#what-it-draws]

* A header band with the breadcrumb for the current page.
* A sidebar with the account menu. On the profile page it also shows the avatar with an upload button.
* The page title as an `h1`, then your page.
* The class `customer` on `<body>`, for every account page. Use it to style the account area without touching other pages.

On small screens the sidebar menu is hidden and the page uses the full width.

## Import [#import]

```tsx
import { CustomerLayout } from '@salla.sa/twilight-theme-engine/components/layout';
```

| Prop       | Type        | Description                                           |
| ---------- | ----------- | ----------------------------------------------------- |
| `children` | `ReactNode` | The account page. Required.                           |
| `page`     | `Page`      | Supplies the breadcrumb and the `h1` title. Optional. |

## How it is used [#how-it-is-used]

The engine generates the `/account` route for you. It is a layout route: it finds the `page` data from whichever child route is open, then wraps that child with `CustomerLayout`:

```tsx title="app/routes/account.tsx (generated)"
function AccountLayoutComponent() {
  const matches = useMatches();
  const page = matches.reduceRight(
    (found, m) => found ?? (m.loaderData?.page ? m.loaderData.page : null),
    null,
  );

  return (
    <CustomerLayout page={page}>
      <Outlet />
    </CustomerLayout>
  );
}
```

While an account page loads, the route shows `CustomerLayoutSkeleton`.

## Replace it [#replace-it]

`CustomerLayout` is not a setting. To change it, replace the `/account` route the same way you replace any built-in page. See [Fork a built-in route](https://docs.salla.dev/twilight/react/recipes/fork-a-built-in-route).

Declare your own route for `/account`:

```ts title="app/routes.ts"
import { route } from '@tanstack/virtual-file-routes';

export const routes = [route('/account', 'account-layout.tsx')];
```

Write the layout route. Keep `<Outlet />`, because that is where each account page appears:

```tsx title="app/routes/account-layout.tsx"
import { createFileRoute, Outlet } from '@tanstack/react-router';

export const Route = createFileRoute('/{-$locale}/account')({
  component: () => (
    <div className="container">
      <aside>{/* your account menu */}</aside>
      <Outlet />
    </div>
  ),
});
```

<Callout type="warn">
  When you replace the account layout you own the account menu, the breadcrumb and the title. Keep the `customer` body class if your styles use it.
</Callout>

## See also [#see-also]

* [Account pages](https://docs.salla.dev/twilight/react/routes/account)
* [Layouts overview](https://docs.salla.dev/twilight/react/layouts)
* [Add content to a slot](https://docs.salla.dev/twilight/react/recipes/add-content-to-a-slot) if you only need to add something