Menu

The <Menu /> component is used to provide a list of pages the user can navigate to – or actions the user can take – in the context of your application. It allows the user to visualise the different sections of the app via expandable top level menu items. The menu displays as a drawer in desktop and a navbar in mobile, can be customised with a logo, footer and a list of modules and user actions.

Show codeCopy code

The user prop is used to display the user avatar and name in the menu. It is an object with the following properties:

• name: The name of the user
• img: The url of the user avatar

The menu prop accepts an object with 2 properties, user and modules.

The user property will be always displayed as the first item in the menu, and all the items will be subitems of the user menu. One special case of the item with the title of "Administration", this item will be displayed as a module in the menu below the user menu and always with the cog icon.

The user property is an array of objects with the following properties:

• title: The title of the module
• url: The url of the module

The modules property is an array of objects with the following properties:

• title: The title of the module
• url: The url of the module
• icon: An IconName type string that represents the icon of the module. It can be any of the following:

type IconName =
  | 'elmo-icon-admin'
  | 'elmo-icon-benefits'
  | 'elmo-icon-calendar'
  | 'elmo-icon-careers'
  | 'elmo-icon-connect'
  | 'elmo-icon-contracts'
  | 'elmo-icon-covid'
  | 'elmo-icon-custom-reports'
  | 'elmo-icon-documents'
  | 'elmo-icon-expenses'
  | 'elmo-icon-home'
  | 'elmo-icon-journeys'
  | 'elmo-icon-learning'
  | 'elmo-icon-leave'
  | 'elmo-icon-my-employees'
  | 'elmo-icon-my-profile'
  | 'elmo-icon-payroll'
  | 'elmo-icon-performance'
  | 'elmo-icon-recruitment'
  | 'elmo-icon-remuneration'
  | 'elmo-icon-reports'
  | 'elmo-icon-rosterTA'
  | 'elmo-icon-succession'
  | 'elmo-icon-survey';

• subItems: Is an array of objects with the following properties:
  • title: The title of the subItem
  • url: The url of the subItem

The following props are optional and can be used to customize the menu.

The branding prop is used to display the company name and logo in the menu. The logo prop is optional the default being the ELMO logo.

The branding prop is an object with the following properties:

• companyName: The name of the company
• logo: The url of the company logo

The footer prop is used to display the footer in the menu. It can be a string of HTML. Or a React component. The default being "Powered by ELMO Software".