MenuBar Dropdown AND Link

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
WoPilz
Posts: 1
Joined: 11 Jul 2022, 11:18

29 Aug 2022, 11:51

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
Posts: 44
Joined: 17 Jun 2022, 09:43

31 Aug 2022, 15:30

Hi,

We'll check and get back to you.

Regards.

seymagullu
Posts: 44
Joined: 17 Jun 2022, 09:43

01 Sep 2022, 09:41

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
Posts: 1
Joined: 26 Dec 2022, 14:26

26 Dec 2022, 14:29

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.
thank you
FMWhatsapp

seymagullu
Posts: 44
Joined: 17 Jun 2022, 09:43

27 Dec 2022, 08:50

Hi,

Please review here.

https://primefaces.org/primeng/megamenu

Regards.

tonyadams
Posts: 2
Joined: 03 May 2023, 08:59

03 May 2023, 09:04

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'}
];

Post Reply

Return to “Paradise - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests