How add popupmenu in right side of header

[KINS]

I would like to add popupmenu in right side of header.I have some clarification on icon css .please check my below comments and advise how to do this.

https://www.screencast.com/t/ZNLmryuoc

[Aravinthan Seetharaman]

Hi Ahmed, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query. 

 

Query: Regarding popup positioning 

 

Ans: We have checked this query. We can achieve this requirement by overriding css style for Dropdown popup. Please refer the below code snippet. 

 

 

@using Syncfusion.Blazor.SplitButtons 

 

<SfDropDownButton CssClass="e-caret-hide custom" Content="Syncfusion DropDown Menu"> 

    <DropDownMenuItems> 

        <DropDownMenuItem Text="Edit"></DropDownMenuItem> 

        <DropDownMenuItem Text="Delete"></DropDownMenuItem> 

        <DropDownMenuItem Text="Mark as Read"></DropDownMenuItem> 

        <DropDownMenuItem Text="Like Message"></DropDownMenuItem> 

    </DropDownMenuItems> 

</SfDropDownButton> 

 

<style> 

    .custom.e-dropdown-popup { 

        left: 348px !important; 

        top: 52px !important; 

    } 

</style> 

 

 

For more details, please refer below UG links 

 

https://blazor.syncfusion.com/documentation/drop-down-menu/how-to/position-popup 

 

https://blazor.syncfusion.com/documentation/drop-down-menu/style-and-appearance  

 

Query: Regarding hide Down caret icon 

 

Ans: We can achieve this requirement by adding “e-caret-hide” class to CssClass property of DropDownMenu. Please refer the below code snippet and sample. 

 

 

<SfDropDownButton CssClass="e-caret-hide custom" Content="Syncfusion DropDown Menu"> 

    <DropDownMenuItems> 

        <DropDownMenuItem Text="Edit"></DropDownMenuItem> 

        <DropDownMenuItem Text="Delete"></DropDownMenuItem> 

        <DropDownMenuItem Text="Mark as Read"></DropDownMenuItem> 

        <DropDownMenuItem Text="Like Message"></DropDownMenuItem> 

    </DropDownMenuItems> 

</SfDropDownButton> 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Server5.0-1494807692  

 

For more details please refer the below UG link. 

 

UG link: https://blazor.syncfusion.com/documentation/drop-down-menu/how-to/hide-dropdown-arrow  

 

Could you please check the above details, and get back to us, if you need assistance on this. 

 

Regards, 

Aravinthan S