> For the complete documentation index, see [llms.txt](https://docs.cremawork.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cremawork.com/v-4/mui/navigation-style.md).

# Navigation Style

We have included eleven navigation styles in the Crema. You can choose the Navigation style according to your choice and requirement by following the under-written steps.

**Changing Navigation Style in run time:-**

Click on the settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find the navigation styles option and from there, you can the navigation style of your choice.\
![](https://203379523-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUKfCepvBVy12KL3pUjmb%2Fuploads%2F7bUjCSiNE6VNTglqV8MY%2Fimage.png?alt=media\&token=7f803bc2-9920-448e-a0a2-4ac56a6a5692)

**Changing Navigation Style in development mode (setting default Navigation Style):-**

To set the default Navigation Style, go to the `libs/constants/src/defaultConfig.js`

In this file, you will find a property named '**navStyle**' inside the defaultConfig object which accepts eleven values. You need to set the value of '**navStyle**' according to your choice. You can achieve it like below.

```javascript
const defaultConfig = {
  ...
  navStyle: process.env.NX_NAV_STYLE, //Change this according our requirement 
  ...
};

######## NavStyle(libs/constants/src/AppEnums.js) ##########

export const NavStyle = {
  DEFAULT: 'default',
  BIT_BUCKET: 'bit_bucket',
  STANDARD: 'standard',
  DRAWER: 'drawer',
  MINI: 'mini',
  MINI_SIDEBAR_TOGGLE: 'mini-sidebar-toggle',
  HEADER_USER: 'user-header',
  HEADER_USER_MINI: 'user-mini-header',
  H_DEFAULT: 'h-default',
  HOR_HEADER_FIXED: 'hor-header-fixed',
  HOR_DARK_LAYOUT: 'hor-dark-layout',
};
```

Layouts and their schematic designs are as follows:-

1. Default Layout \
   ![](https://203379523-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUKfCepvBVy12KL3pUjmb%2Fuploads%2FirWubZLgf1xMvx3Z0lPX%2Fimage.png?alt=media\&token=8fd6685e-85d2-4000-bad3-a9d344f6d604)
2. Standard Layout\
   ![](https://203379523-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUKfCepvBVy12KL3pUjmb%2Fuploads%2F210xsdWl6QRBHmszV6Ip%2Fimage.png?alt=media\&token=5346b252-58e9-4107-9a7c-728ed918d3fc)
3.  Mini Layout\
   ![](https://203379523-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUKfCepvBVy12KL3pUjmb%2Fuploads%2FkpWVpWzaRHr31EFkzecL%2Fimage.png?alt=media\&token=d6dc200f-9818-4313-98c9-2eff3ef2afa2)
4. Drawer Layout\
   ![](https://203379523-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUKfCepvBVy12KL3pUjmb%2Fuploads%2FBhjHFuIfNtFcz421DYMg%2Fimage.png?alt=media\&token=d105ed67-ecec-4454-b79a-4128f776fcae)
5. Bit Bucket Layout\
   ![](https://203379523-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUKfCepvBVy12KL3pUjmb%2Fuploads%2Ff3D7BWQwT1uP0KZnS1Vb%2Fimage.png?alt=media\&token=890758f8-b62a-41c2-8778-9e4a82cbbda7)
6. Horizontal Default Layout\
   ![](https://203379523-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUKfCepvBVy12KL3pUjmb%2Fuploads%2FtiniTiKmUBWemwessCoy%2Fimage.png?alt=media\&token=17009c87-1554-4176-a740-cea60268f0e2)
7. Horizontal Light Navigation Layout

   ![](https://203379523-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUKfCepvBVy12KL3pUjmb%2Fuploads%2FR9ymizkPF19RqLe6F2KC%2Fimage.png?alt=media\&token=4ce769b6-8c7e-4352-a02d-8b81a1869885)
8. Horizontal Dark Navigation Layout\
   ![](https://203379523-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUKfCepvBVy12KL3pUjmb%2Fuploads%2Fvg1zRr3FryXTSODpgsg0%2Fimage.png?alt=media\&token=b4effa71-c646-498f-861e-6bbeec3c16ef)
9. Mini Sidebar Toggle\
   ![](https://203379523-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUKfCepvBVy12KL3pUjmb%2Fuploads%2FhQOizEG7Wjn7SFiT1BFW%2Fimage.png?alt=media\&token=38ef295c-29fa-40f5-9b55-b450247aea73)
10. Header User\
    ![](https://203379523-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUKfCepvBVy12KL3pUjmb%2Fuploads%2F1zhEsJQRhTlbDqtHJX7g%2Fimage.png?alt=media\&token=66cee875-f291-40cb-81f6-12a7a416ec3b)
11. Header User Mini\
    ![](https://203379523-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUKfCepvBVy12KL3pUjmb%2Fuploads%2FLZmVFdPT1aqEjGYETs49%2Fimage.png?alt=media\&token=8a9bd4b1-8bcb-4f47-b7c4-6cd7ff4215d2)