Skip to content

Commit e50e464

Browse files
kendo-botKB Botntachevadimodi
authored
Added new kb article dropdownbutton-add-separator-between-items (#2834)
* Added new kb article dropdownbutton-add-separator-between-items * Update knowledge-base/dropdownbutton-add-separator-between-items.md * Update knowledge-base/dropdownbutton-add-separator-between-items.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/dropdownbutton-add-separator-between-items.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/dropdownbutton-add-separator-between-items.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/dropdownbutton-add-separator-between-items.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/dropdownbutton-add-separator-between-items.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/dropdownbutton-add-separator-between-items.md --------- Co-authored-by: KB Bot <kb-bot@telerik.com> Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
1 parent 8e3ff0f commit e50e464

File tree

1 file changed

+59
-0
lines changed

1 file changed

+59
-0
lines changed
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
title: Adding a Separator Between Items in a DropDownButton for Blazor
3+
description: Learn how to add a separator between the items in a DropDownButton by utilizing custom styling in a Blazor application.
4+
type: how-to
5+
page_title: How to Implement Item Separators in a Telerik Blazor DropDownButton
6+
slug: dropdownbutton-kb-add-separator-between-items
7+
tags: dropdownbutton, blazor, item separator, custom styling
8+
res_type: kb
9+
ticketid: 1680307
10+
---
11+
12+
## Environment
13+
<table>
14+
<tbody>
15+
<tr>
16+
<td>Product</td>
17+
<td>DropDownButton for Blazor</td>
18+
</tr>
19+
</tbody>
20+
</table>
21+
22+
## Description
23+
24+
I want to visually separate the items in a [DropDownButton](slug:dropdownbutton-overview) to enhance the UI and improve user experience. How to add a separator (divider) between the items?
25+
26+
## Solution
27+
28+
The DropDownButton uses a declarative approach for its items, so you can add any desired item. This component does not have a concept for a "separator" item (similar to the [ContextMenu](slug:contextmenu-data-binding-overview), for example) but you can use a custom approach to create a separator.
29+
30+
The content of the DropDownButtonItem is rendered inside a `<span class="k-menu-link-text">` element, which is narrower than the popup. Thus, a border inside the dropdown item content cannot span over the whole width of the popup. This article demonstrates how to add a separator by setting a CSS class on the whole item and using custom styling.
31+
32+
To create a visual separator between items in a DropDownButton, apply a custom class to the item that precedes the separator and style its bottom border. This approach allows you to simulate a separator without the need for a dedicated separator item. The custom class can be applied directly in the item declarations in your Blazor component.
33+
34+
>caption Add separator between DropDownButton items
35+
36+
````RAZOR
37+
<style>
38+
.item-with-separator {
39+
border-bottom: 1px solid var(--kendo-color-border-alt);
40+
}
41+
</style>
42+
43+
<TelerikDropDownButton Icon="@SvgIcon.Share">
44+
<DropDownButtonContent>Share</DropDownButtonContent>
45+
46+
<DropDownButtonItems>
47+
<DropDownButtonItem Icon="@SvgIcon.Facebook">Facebook</DropDownButtonItem>
48+
<DropDownButtonItem Icon="@SvgIcon.Twitter">Twitter</DropDownButtonItem>
49+
<DropDownButtonItem Icon="@SvgIcon.Linkedin" Class="item-with-separator">Linkedin</DropDownButtonItem>
50+
<DropDownButtonItem>Other</DropDownButtonItem>
51+
</DropDownButtonItems>
52+
53+
</TelerikDropDownButton>
54+
````
55+
56+
## See Also
57+
58+
- [DropDownButton Overview](slug:dropdownbutton-overview)
59+
- [Customizing the Appearance of Telerik UI for Blazor Components](slug:themes-override)

0 commit comments

Comments
 (0)