# 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://content.gitbook.com/content/qDnYliSrAgeQITcXRW4t/blobs/cUSQrsRGFzOORGGaFJgm/image.png)

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

To set the default Navigation Style, go to the `src/@crema/constants/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(src/@crema/constants/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://content.gitbook.com/content/qDnYliSrAgeQITcXRW4t/blobs/eB0ZJkIVOcpkX6GCLPHJ/image.png)
2. Standard Layout\
   ![](https://content.gitbook.com/content/qDnYliSrAgeQITcXRW4t/blobs/BhfFHY2irNdQe0UYlVbO/image.png)
3.  Mini Layout\
   ![](https://content.gitbook.com/content/qDnYliSrAgeQITcXRW4t/blobs/GvZGjIl7otNFDMQ0SvRb/image.png)
4. Drawer Layout\
   ![](https://content.gitbook.com/content/qDnYliSrAgeQITcXRW4t/blobs/ImDRLXP7155vVf4BvTfJ/image.png)
5. Bit Bucket Layout\
   ![](https://content.gitbook.com/content/qDnYliSrAgeQITcXRW4t/blobs/iXcdxujjErj4NjM2yX73/image.png)
6. Horizontal Default Layout\
   ![](https://content.gitbook.com/content/qDnYliSrAgeQITcXRW4t/blobs/VaTbI9uOw23QUbCSunNV/image.png)
7. Horizontal Light Navigation Layout

   ![](https://content.gitbook.com/content/qDnYliSrAgeQITcXRW4t/blobs/e3agYetAOY8i9xCRG5fh/image.png)
8. Horizontal Dark Navigation Layout\
   ![](https://content.gitbook.com/content/qDnYliSrAgeQITcXRW4t/blobs/PnLm3siXt0SCeRknTNvX/image.png)
9. Mini Sidebar Toggle\
   ![](https://content.gitbook.com/content/qDnYliSrAgeQITcXRW4t/blobs/jffxBavMbxy5xR86WKfH/image.png)
10. Header User\
    ![](https://content.gitbook.com/content/qDnYliSrAgeQITcXRW4t/blobs/GbIrIuqD0E83CVwLCYKj/image.png)
11. Header User Mini\
    ![](https://content.gitbook.com/content/qDnYliSrAgeQITcXRW4t/blobs/PE35A6zkjZHDAS13VxNU/image.png)