AppBar with MenuBar

[Mark]

Will the MenuBar work inside the new AppBar component? I've placed a menubar inside but the menu items disappear under the exterior appbar. Is there a workaround or solution to this?

[Anton Mironov]

Hello Mark,

Thank you for this interesting case. 

In order to achieve the desired behavior, I would recommend setting the z-index of the components. This approach will give the opportunity to show the menu items over the appbar. 

I hope this information helps. If further assistance is needed, send me an isolated sample project or a dojo example with the implementation. I will try my best to resolve this one quickly.

 

Kind Regards,
Anton Mironov
Progress Telerik

[Anton Mironov]

Hello Mark,

I tried to implement the pointed behavior and replicate the issue.

The reason for the faulty behavior is that the appbar has set its own style "overflow: hidden" and everything that overflows the appbar is cut. The approach that I could recommend is to override the overflow style of the appbar. Try adding the following style:

  <style>
    .k-appbar{
          overflow: visible;
    }
  </style>

The complete implementation could be found in the following dojo example:

• https://dojo.telerik.com/OgomuPAf

Give the approach above a try and let me know if further assistance is needed.

 

Best Regards,
Anton Mironov
Progress Telerik

[Mark]

Thanks Anton. That's brilliant! I've confirmed that works and is just what I wanted.

[Anton Mironov]

Hi Mark,

I am glad to hear that the issue you were facing is now resolved. 

I used this interesting case to create a knowledge base article:

• https://docs.telerik.com/kendo-ui/knowledge-base/appbar-with-menu

I am now closing this thread. If further assistance is needed for this or another case, do not hesitate to contact our team.

Greetings,
Anton Mironov
Progress Telerik