User profile menu in top-right site toolbar Dropdown List

[Devarajan]

how to inserting top menu bar in right side, when user click the icon to display the list of some information like profile edit ,setting and some other information to be display. 

[Alagumeena Kalaiselvan]

Hi Prabudevarajan, 

  

Greetings from Syncfusion support! 

  

We have checked with your reported case “User profile menu in top right side of Toolbar” and we suggest you to use the Align property to  align the toolbar items and set value as Right to align item on right side of the Toolbar. We have prepared a sample for your reference and refer the below code for that. 

  

@using Syncfusion.EJ2.Blazor.Navigations 

  

<EjsToolbar Width="600px"> 

    <ToolbarItems> 

        <ToolbarItem> 

            <ToolbarItem Type="ItemType.Button" Text="Profile"></ToolbarItem> 

        </ToolbarItem> 

        <ToolbarItem Type="ItemType.Input" Align="ItemAlign.Right">  // To Align item on right side 

            <Template> 

                <EjsMenu Items="@MenuItems"></EjsMenu> 

            </Template> 

        </ToolbarItem> 

    </ToolbarItems> 

</EjsToolbar> 

  

@code { 

    public List<MenuItem> MenuItems = new List<MenuItem>{ 

         

        new MenuItem{ Text = "Edit", IconCss = "e-icons e-edit", Items = new List<MenuItem>{ 

            new MenuItem{ Text= "Name" }, 

            new MenuItem{ Text= "DOB" }, 

            new MenuItem{ Text= "Designation" }} 

    }, 

        new MenuItem { Text = "Settings" } 

    }; 

} 

  

<style> 

    .e-edit::before { 

        content: '\e7a3'; 

    } 

</style> 

  

  

Also, you can download this sample by the following link 

Sample Link:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/Toolbar-1090070553  

  

Kindly try out with shared sample and get back to us, If you need further assistance. 

  

Regards 

Alagumeena.K