Добавить DropDownList в меню массива

Question

Мне нужно добавить новые ссылки в меню, но так, как это делается сегодня, оно объявлено в виде массива. TypeScript:

import { MenuItem } from './menu-item';

export const MENU: MenuItem[] = [
    { name: 'Menu1', link: 'menu1'},
    { name: 'Menu2', link: 'menu2'},
    { name: 'Menu3', link: 'Menu3'},
    { name: 'Menu4', link: 'menu4'}
]

Компонент:

import { MENU } from './menu';
    @Component({
      selector: 'app-menu',
      templateUrl: './menu.component.html'
    })
    export class MenuComponent {

      routeFragment = '';
      menu: MenuItem[] = MENU;

      constructor(private router: Router) { 
        this.router.events.subscribe(
          e => {
            if(e instanceof NavigationEnd) {
              this.checkRoute(e.url);
            }})}

      checkRoute(url: string) {
        const barIndex = url.indexOf('/', 1);
        if(barIndex === -1) {
          this.routeFragment = url;
        } else {
          this.routeFragment = url.substring(0, barIndex);
        }}}

Эта константа MENU используется для вызова на всех экранах. Но, как это делается сегодня, можно открыть только одну ссылку. Мне нужно было вставить новую ссылку для регистрации, но с несколькими вариантами, например: Menu4 открывает подменю 1 подменю 2 подменю 3 ... каждое со своей ссылкой

Возможно ли это сделать, как это разрабатывается сегодня ? Если нет, то как?