Angular PrimeNG TieredMenu allows creating a hierarchical menu with multiple levels of submenus. By default, the submenus open in a dropdown below their parent menu item. However, we can also configure the TieredMenu to display submenus inline with their parent menu item.

To create an inline TieredMenu in Angular PrimeNG, we need to set the inline attribute to true on the TieredMenu component, as shown below:

Here, menuItems is an array of MenuItem objects that define the structure and content of the TieredMenu. We can define submenus using the items property of a MenuItem.

For example, the following code defines a TieredMenu with two top-level menu items, each with two submenus displayed inline with their parent item:

menuItems: MenuItem[] = [
  {
    label: 'Menu 1',
    icon: 'pi pi-file',
    items: [
      {
        label: 'Submenu 1.1',
        icon: 'pi pi-refresh',
      },
      {
        label: 'Submenu 1.2',
        icon: 'pi pi-times',
      }
    ]
  },
  {
    label: 'Menu 2',
    icon: 'pi pi-search',
    items: [
      {
        label: 'Submenu 2.1',
        icon: 'pi pi-refresh',
      },
      {
        label: 'Submenu 2.2',
        icon: 'pi pi-times',
      }
    ]
  }
];

We can customize the appearance of the menu and submenu items using CSS classes or the PrimeNG Theme Designer. 免责声明：本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。