TelerikDropDownButton Separator Item

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 16 Jul 2025 10:25 by ADMIN

Andrew

Created on: 11 Jul 2025 20:16

Category: DropDownButton

Type: Feature Request

TelerikDropDownButton Separator Item

Sometimes with a dropdown button I would like to have Category headers or Separators to breakup the list. To accomplish a seperator it needs to be added to another existing DropDownItem. To create a category header you can style an existing DropDownItem, however it's still clickable so it becomes obvious to the user that this is a bit of a misuse of the control. Native support for Categories or Separators would be ideal, however, just having control over the click behavior and perhaps a Template property for full control over this one items rendering would make it more extensible.

Thank you,

-Andy

1 comment

ADMIN

Dimo

Posted on: 16 Jul 2025 10:25

Hi Andy,

We already have a feature request about DropDownButton item hierarchy, which can address the Category headers topic, but in a different way. I am rewording this request to be just for separators.

In the meantime, to make DropDownButton items less prone to accidental clicks, you can set Enabled="false". This will disable their hover state and apply different styling automatically.

<TelerikDropDownButton Icon="@SvgIcon.Share">
    <DropDownButtonContent>Share</DropDownButtonContent>

    <DropDownButtonItems>
        <DropDownButtonItem Enabled="false"><strong>Category Header 1</strong></DropDownButtonItem>
        <DropDownButtonItem Icon="@SvgIcon.Facebook">Facebook</DropDownButtonItem>
        <DropDownButtonItem Icon="@SvgIcon.Twitter">Twitter</DropDownButtonItem>
        <DropDownButtonItem Enabled="false"><div style="height: 2px; width: 100%; background-color: var(--kendo-color-on-app-surface);"></div></DropDownButtonItem>
        <DropDownButtonItem Enabled="false"><strong>Category Header 2</strong></DropDownButtonItem>
        <DropDownButtonItem Icon="@SvgIcon.Linkedin">Linkedin</DropDownButtonItem>
        <DropDownButtonItem Icon="@SvgIcon.Reddit">Reddit</DropDownButtonItem>
    </DropDownButtonItems>

</TelerikDropDownButton>

If it's important to NOT close the dropdown when the user clicks on a "non-clickable" item, then replace the DropDownButton with a Button+Popup combination.

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.