> 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-3/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 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 navigation styles option and from there, you can navigation style of your choice.

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

To set the default Navigation Style, go to the src/@crema/utility/AppContextProvider/defaultConfig.js file.

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 achive it like below.

{% code title="src/@crema/utility/AppContextProvider/defaultConfig.js" %}

```javascript
const defaultConfig = {
  ...
  navStyle: NavStyle.DEFAULT, //Chnage this according our requirement 
  ...
};

######## NavStyle(src/shared/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',
};
```

{% endcode %}

Layouts and their schematic designs are as follows:-

1\. Default Layout           

                                  ![](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2Fl7Fzpv3TMJraetKOfLnP%2Fdefault.svg?alt=media\&token=1e28309f-f94e-4310-a07e-de83a6ba2515)

 2\. Standard Layout          

                                  ![](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2FWC5ypt2AfqbKn81HjIIN%2Fstandard.svg?alt=media\&token=f0b031f7-0fb4-41d0-b0a8-4ea9332b15e0)

3\. Mini Layout                     

                                  ![](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2FGbOGpu977YvJlULPAQMO%2Fmini.svg?alt=media\&token=9cab3761-b229-4a17-a04e-794533e389c5)

4\. Drawer Layout       

                                  ![](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2FWvuCoho2p8pLhHTZPNfQ%2Fdrawer.svg?alt=media\&token=9027bdb7-7e53-4568-accb-ddc9d9aef87a)

5\. Bit Bucket Layout 

                                  ![](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2FgPSVaYg0tNBdTgXQFRj1%2Fbit_bucket.svg?alt=media\&token=80c54b56-fe45-455b-a6e7-0aae8c4a2292)

6\. Horizontal Default Layout

                                  ![](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2F5Y96rIUhtQcTFjIeuwLO%2Fh-default.svg?alt=media\&token=fdf00d26-e104-4e3c-ac59-d08a4859a4e8)

7\. Horizontal Light Navigation Layout

                                 ![](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2FuZNjqsLMNsSgYRZKkTgs%2Fhor-header-fixed.svg?alt=media\&token=1341ce7b-042c-4cf8-85f9-b489b524b536)

8\. Horizontal Dark Navigation Layout

                                 ![](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2FHON0MHRJ4EVXaQRmvOtR%2Fhor-dark-layout.svg?alt=media\&token=a53bfc86-3ea7-463c-844a-1c1a82894b97)

9\. Mini Sidebar Toggle           

                                  ![](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2F9MjhD13fsZztze7KLNUc%2Fmini-sidebar-toggle.svg?alt=media\&token=80f27373-3a52-4261-b928-0e9ffa793078)

 10\. Header User

                                  ![](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2FVnCx2XBCdOJbFUavfSwt%2Fuser-header.svg?alt=media\&token=0adec3fe-66a3-4589-9e65-a6da16523843)

11\. Header User Mini

                                  ![](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2FsAIq9cvMSgUIZidjN016%2Fuser-mini-header.svg?alt=media\&token=feaca151-edb8-4b94-8bd4-c5ef9ae5903c)