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.

src/@crema/utility/AppContextProvider/defaultConfig.js

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',
};

Layouts and their schematic designs are as follows:-

1. Default Layout

2. Standard Layout

3. Mini Layout

4. Drawer Layout

5. Bit Bucket Layout

6. Horizontal Default Layout

7. Horizontal Light Navigation Layout

8. Horizontal Dark Navigation Layout

9. Mini Sidebar Toggle

10. Header User

11. Header User Mini