MenuBar Dropdown AND Link

[WoPilz]

Hello,

In my Application, I am generating objects via input-pages, which then are added to the menu in a hierachy, so some components have children in a submenu. These are shown with a dropdown, just like in the Demo of the Paradise Template at the rider "HIERARCHY" (https://www.primefaces.org/paradise-ng/#/).
Each of this items has a routerLink - is it possible that a menuItem has both children via dropdown and a link that is clickable? Again with the Demo example this would mean that by clicking "Submenu 1" you would be navigated to a "submenu 1" Page, and by clicking the arrow there would be the dropdown.

I thought about maybe changing this part of the MenuBar to a MegaMenu, because I think that it would work wih this, but I think this might brek the whole template abd would also be not really elegant.
Thanks a lot for your help!

[seymagullu]

Hi,

We'll check and get back to you.

Regards.

[seymagullu]

Hi,

Yes you can use it.
Sidebar add to the component associated with the app.menu.component.ts sidebar. Then add the mega menu by following the link below.

https://primefaces.org/primeng/megamenu

The hierarchy is used in the menuitem. After you add your own, you can comment the parts related to the hierarchy.

[revin121]

How to Make a Dropdown Menu in HTML
Step 1: Add a <label> element to your HTML document. This will be the name of your dropdown menu.
Step 2: Add a <select> element. ...
Step 3: Create <option> elements and place them inside the <select> element. ...
Step 4: Add a default value from the dropdown list, if desired.

[seymagullu]

Hi,

Please review here.

https://primefaces.org/primeng/megamenu

Regards.

[tonyadams]

Absolutely! To create a menu item with both children and a clickable link, you can use the "routerLink" property on the menuItem. Here's an example code snippet: io games

Code: Select all

<p-menubar [model]="menuItems">
</p-menubar>

menuItems = [  {    label: 'Submenu 1',    items: [      {label: 'Child 1', routerLink: '/submenu1/child1'},      {label: 'Child 2', routerLink: '/submenu1/child2'}    ],
    routerLink: '/submenu1'
  },
  {
    label: 'Submenu 2',
    items: [
      {label: 'Child 1', routerLink: '/submenu2/child1'},
      {label: 'Child 2', routerLink: '/submenu2/child2'}
    ],
    routerLink: '/submenu2'
  },
  {label: 'Link', routerLink: '/link'}
];