> For the complete documentation index, see [llms.txt](https://docs-drift-angular.g-axon.work/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-drift-angular.g-axon.work/structure/layouts.md).

# Layouts

Drift Angular has lots of layout that fullfill your requirements to develop a Amaizing App.

There are following layouts which Drift Angular provides:

### Default Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/default-layout/default-layout.module#DefaultLayoutModule'
```

![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LumJjzfjYYmGnDzVRjK%2F-LumPBcbD0v8qfZbkdOS%2Flayout-default.png?alt=media\&token=9f977e4c-a8aa-43bf-8f4f-2cf440d75377)

### SAAS Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/saas-layout/saas-layout.module#SaasLayoutModule'
```

![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LumJjzfjYYmGnDzVRjK%2F-LumPBce-wL79vtoqY2m%2Flayout-saas.png?alt=media\&token=03169774-6649-4315-99b9-6047e37a83a5)

### Listing Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/listing-layout/listing-layout.module#ListingLayoutModule'
```

![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LumJjzfjYYmGnDzVRjK%2F-LumPBcfgK8z4ruWGyWg%2Flayout-listing.png?alt=media\&token=95804b18-c6a9-4b7d-b658-f79e51f253df)

### Intranet Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/intranet-layout/intranet-layout.module#IntranetLayoutModule'
```

![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LumJjzfjYYmGnDzVRjK%2F-LumPBcVwzeIM5w5fveB%2Flayout-intranet.png?alt=media\&token=55170ef8-485b-4e9d-b185-7fa14054adac)

### Back Office Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/back-office-layout/back-office-layout.module#BackOfficeLayoutModule'
```

![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LumJjzfjYYmGnDzVRjK%2F-LumPBca690ezw8EkabC%2Flayout-back-office.png?alt=media\&token=5b7fd3f9-e3a4-47b0-a35a-a4d2dce35149)

### Back Office Minimal Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/back-office-mini-layout/back-office-mini-layout.module#BackOfficeMiniLayoutModule'
```

![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LumJjzfjYYmGnDzVRjK%2F-LumPBc_pVoTDv-c29dE%2Flayout-back-office-mini.png?alt=media\&token=035c5025-ff98-414e-be69-2e21d6a284c1)

### Modern Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/modern-layout/modern-layout.module#ModernLayoutModule'
```

![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LumJjzfjYYmGnDzVRjK%2F-LumPBcdgyd2U9vJ_Fxo%2Flayout-modern.png?alt=media\&token=0052867d-cad6-4406-9a5b-12d8ac699aae)

### CRM Layout

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/default-layout/crm-layout.module#CrmLayoutModule'
```

![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LumJjzfjYYmGnDzVRjK%2F-LumPBccov7apkWFRv_e%2Flayout-crm.png?alt=media\&token=6229a418-0b80-4f64-8813-cf96fe63dd3d)

### Common Layouts

There are two common layouts for authentication and frontend pages.

#### Auth Layout

Auth layout will use to authenticate user. Here user can signup and sign-in.

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/auth-layout/auth.module#AuthModule'
```

and add AuthGuard to other reoutes to stop access without sign-in.

```typescript
canActivate: [AuthGuard]
```

#### Frontend Layout

Frontend layout will use to for frontent pages in Drift Angular.

To use this layout add following route in `src/app/app-routing.module.ts` file:

```
loadChildren: './layouts/frontend-layout/frontend-layout.module#FrontendLayoutModule'
```