## Usage

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.

```tsx live
const userMenu = [
  {
    title: 'Change Password',
    url: '/change-password',
  },
  {
    title: 'Sign Out',
    url: '/logout',
  },
  {
    icon: 'elmo-icon-admin',
    title: 'Administration',
    url: '/admin',
  },
];

const modulesMenu: ItemMenuProps[] = [
  {
    icon: 'elmo-icon-home',
    title: 'Home',
    url: '/dashboard',
  },
  {
    icon: 'elmo-icon-my-profile',
    title: 'My Profile',
    url: '/my-profile',
  },
  {
    icon: 'elmo-icon-my-employees',
    title: 'My Team',
    url: '/team-members',
    subItems: [
      {
        title: 'SubItem 1',
        url: '#',
      },
      {
        title: 'SubItem 2',
        url: '#',
      },
      {
        title: 'SubItem 3',
        url: '#',
      },
    ],
  },
  {
    icon: 'elmo-icon-benefits',
    title: 'Benefits',
    url: '/benefits',
  },
  {
    icon: 'elmo-icon-learning',
    title: 'Learning',
    url: '/learning',
  },
  {
    icon: 'elmo-icon-payroll',
    title: 'Payroll',
    url: '/payroll',
  },
  {
    icon: 'elmo-icon-leave',
    title: 'Leave',
    url: '/leave-requests',
  },
  {
    icon: 'elmo-icon-documents',
    title: 'Documents',
    url: '/documents',
  },
  {
    icon: 'elmo-icon-performance',
    title: 'Performance',
    url: '/my-performance',
  },
  {
    icon: 'elmo-icon-recruitment',
    title: 'Recruitment',
    url: '/requisition',
  },
  {
    icon: 'elmo-icon-careers',
    title: 'Careers',
    url: '/careers',
  },
];

const footer = `Powered by <a href="https://elmosoftware.com.au/" target="_blank">ELMO Software</a>`;

return (
  <Menu
    user={{
      name: 'John Doe',
      img: 'https://i.pravatar.cc/150?img=3',
    }}
    branding={{
      companyName: 'ELMO HR & Company Payroll',
    }}
    menu={{
      modules: modulesMenu,
      user: userMenu,
    }}
    footer={footer}
  />
);
```

### User

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

### Menu

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:

```ts
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

## Optional props

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

### Branding

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

### Footer

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".

A primary navigation component for your app.

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources