How I can show dropdown menu horizontally in NavBar?

Questions
1

menuItems.push({itemId: ‘6’, text: ‘Menu’, position: ‘RIGHT’, tooltip: ‘A submenu’,
subMenuItems:
[
{ text: ‘Action’},
{ text: ‘More action’},
{text: ‘Last action’}
]
});

I want that dropdown menu should be opened horizontally instead of vertically, Please help if anyone has any idea or suggestion. Thanks

2

Hi Aijaz,

Thanks for posting on the forum.

The NavBar component is meant to be oriented horizontally with vertical drop-downs.
There is another component, SideNav, which is meant to orient vertically. Does that work for your use case?
If not, please share a screenshot of an example of what you are trying to achieve.

Best,
Sean

3

Thank you, Dear Sean for your response.

I want that a submenu (dropdown) should open horizontally instead of vertically.
A related picture is attached below for example.

Regards
Aijaz

horizontallyDropDown.PNG
horizontallyDropDown.PNG772×146 32.6 KB

4

Hi Aijaz,

there isn’t a component property which allow you to display the dropdown menu horizontally instead of vertically.
You can try to apply some custom CSS.
In a small sample i have tried this CSS rule and works for me

.bts-extra-navbar ul > li {
    display: inline-block;
}

However i can’t tell if will be a good fit in case you have many items in your submenus.

Regards,
Paolo