Add Custom Menu with sub-menu to Jhipster React Project

Objective
Add a menu “Upload” with two submenu “Dataset1” and “Dataset2” to the jhipster navigation bar. On clicking each sub menu accordingly different component should get loaded.

Tested on jhipster version 6.10.0

1. Create a folder app/upload which will hold our custom component.
2. Create an index file app/upload/index.tsx

import React from ‘react’;
import { Switch } from ‘react-router-dom’;
import PrivateRoute from ‘app/shared/auth/private-route’;
import { AUTHORITIES } from ‘app/config/constants’;
import Dataset1 from ‘./Dataset1’;
import Dataset2 from ‘./Dataset2’;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import ErrorBoundaryRoute from ‘app/shared/error/error-boundary-route’;
const Routes = ({ match }) => (
 <div>
 <Switch>
 <PrivateRoute path=”/upload/dataset1" component={Dataset1} hasAnyAuthorities={[AUTHORITIES.DATASET1]} />
 <PrivateRoute path=”/upload/dataset2" component={Dataset2} hasAnyAuthorities={[AUTHORITIES.DATASET2]} />
 </Switch>
 </div>
);
export default Routes;

we assume that two component require separate access authority. If no such requiremnt you can avoid hasAnyAuthorities={} property

3. Create two component Dataset1 and Dataset2
create file app/upload/Dataset1.tsx

import React from 'react';
const Dataset1 = () => {
    return (
        <div>
           <p>Dataset 1</p>
        </div>
    );
}
export default Dataset1;

create file app/upload/Dataset2.tsx

import React from 'react';
const Dataset2 = () => {
    return (
        <div>
           <p>Dataset 2</p>
        </div>
    );
}
export default Dataset2;

4. Modify app/routes.tsx file
Add these lines before routing path for Home and Entities. This is necessary because routing path for Entities is ‘/’. Any specific routing like /upload or /abc must be mentioned before routing ‘/’.

import Upload from 'app/upload';
<PrivateRoute path="/upload" component={Upload} hasAnyAuthorities={[AUTHORITIES.USER]} />

Note: the routing path mentioned here is /upload. Note this path should not be allotted to any other component.

5. Create a UploadMenu
Add file app/shared/layout/menus/upload.tsx

import React from 'react';
import MenuItem from 'app/shared/layout/menus/menu-item';
import { DropdownItem } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Translate, translate } from 'react-jhipster';
import { NavLink as Link } from 'react-router-dom';
import { NavDropdown } from './menu-components';
export const UploadMenu = props => (
  <NavDropdown
    icon="th-list"
    name="Upload"
    id="upload-menu"
    style={{ maxHeight: '80vh', overflow: 'auto' }}
  >
    <MenuItem icon="asterisk" to="/upload/dataset1">
     Dataset1
    </MenuItem>
    <MenuItem icon="asterisk" to="/upload/dataset2">
      Dataset2
    </MenuItem>
</NavDropdown>
);

6. Add below line to file app/shared/layout/menus/index.tsx

export * from './upload';

7. Modify app/shared/layout/header/header.tsx
Add UploadMenu in the import statement

import { AdminMenu, EntitiesMenu, AccountMenu, LocaleMenu, UploadMenu } from '../menus';

Add UploadMenu Component inside <Nav> component.

{props.isAuthenticated && <UploadMenu />}

Thats it !!!