MenuBar Dropdown AND Link

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

29 Aug 2022, 11:51


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" (
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!

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

31 Aug 2022, 15:30


We'll check and get back to you.


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

01 Sep 2022, 09:41


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

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

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

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

27 Dec 2022, 08:50


Please review here.


Posts: 4
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">

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