> 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'
```

![](/files/-LumPBcbD0v8qfZbkdOS)

### 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'
```

![](/files/-LumPBce-wL79vtoqY2m)

### 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'
```

![](/files/-LumPBcfgK8z4ruWGyWg)

### 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'
```

![](/files/-LumPBcVwzeIM5w5fveB)

### 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'
```

![](/files/-LumPBca690ezw8EkabC)

### 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'
```

![](/files/-LumPBc_pVoTDv-c29dE)

### 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'
```

![](/files/-LumPBcdgyd2U9vJ_Fxo)

### 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'
```

![](/files/-LumPBccov7apkWFRv_e)

### 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'
```