I’m looking for some custom drop down(ComboBox) component which biferficates the menu options. Basically a drop down menu with some header label on top and options below it. Something like attached Image (Img1). Currently I’m using Vaadin ComboBox component. Any leads on same would be very much helpful.
Framework: Vaadin 7/8
[Img1]
(https://ibb.co/5WwTbWv)
The image you shared is a bit weird in my opinion. I don’t really understand why it has a separate search/filter input in the dropdown, but it still seems to show all options (not filtering the options) even when there is text in the input.
But in case you don’t need the filtering capability of ComboBox, you can do something similar (with separators and sub headings etc.) if you use Select (<vaadin-select>) component instead.
See this demo:
The Select example that Kari linked to uses emptySelectionCaption to simulate a separator/heading. I don’t think this counts, as you can do this only once, at the top - and it’s clickable which a group-title shouldnt be. you also cannot add such a separator or heading in the middle of the list.
I see the need of Shaini more like a mix between a ComboBox (or Select) and [ListBox]
(https://vaadin.com/components/vaadin-list-box/java-examples). Because the ListBox has the separator/subheadings functionality, but it’s not a dropdown.
I would be interested in such a component as well. In my opinion it would be best (in developer perspective) to add listbox-like functionality to ComboBox and/or Select. To mix actual items (–> <vaadin-item>) with other, nonclickable components
Kaspar is right regarding the Java example using setEmptySelectionCaption for the disabled heading. I first looked at the HTML API examples and assumed Java version of it was doing something similar. I’m more familiar with the HTML API myself, but the Select does use ListBox internally and it seems to me that you can add any components into Select even with the Java API using select.addComponents() like the example is already adding e.g. Hr elements.
I’m pretty sure you should be able to add e.g. Span, Div or whatever components and use them as sub headings.
you also cannot add such a separator or heading in the middle of the list.
That is not true as the above linked Java example already shows adding an Hr separator in the middle using:
select.addComponents(Weekday.FRIDAY, new Hr());
Oh you are right! I never realized that. very cool!
So the answer to the question is to use Select component.
The only downside is that the developer has to know himself after which item to insert what component. There is no automatic grouping functionality. that would be awesome, but I guess I’ll take what I can get. There are more pressing issues than this 
It’s a bit more flexible/easy to do this kind of thing with the <vaadin-select> web component (HTML API). If you want more flexibility on the Java API you could try extending the Select component and add your own API to make it nicer using the Element API (getElement()) to directly modify the DOM. Or you could suggest a new feature to the Select component Java API by making a feature request issue here https://github.com/vaadin/vaadin-select-flow/issues with some info about your use case.