How to change menu bar text

[Amjad Khan]

How should I change the font size, font family in the SfMenu items?

[Mohan Kumar Ramasamy]

Hi Amjad, 

 

We have checked your reported query. We can achieve your requirement using CSS style property. Please refer below code snippets. 

 

@using Syncfusion.Blazor.Navigations 

<div class="control-section"> 

    <div class="menu-control"> 

        <SfMenu TValue="MenuItem"> 

            <MenuItems> 

                <MenuItem Text="File" IconCss="em-icons e-file"> 

                    <MenuItems> 

                        <MenuItem Text="Open" IconCss="em-icons e-open"></MenuItem> 

                        <MenuItem Text="Save" IconCss="em-icons e-save" Disabled="false"></MenuItem> 

                        <MenuItem Separator="true"></MenuItem> 

                        <MenuItem Text="Exit"></MenuItem> 

                    </MenuItems> 

                </MenuItem> 

 

                <MenuItem Text="Edit" IconCss="em-icons e-edit"> 

                    <MenuItems> 

                        <MenuItem Text="Cut" IconCss="em-icons e-cut"></MenuItem> 

                        <MenuItem Text="Copy" IconCss="em-icons e-copy"></MenuItem> 

                        <MenuItem Text="Paste"></MenuItem> 

                    </MenuItems> 

                </MenuItem> 

 

                <MenuItem Text="View"> 

                    <MenuItems> 

                        <MenuItem Text="Toolbars"> 

                            <MenuItems> 

                                <MenuItem Text="Menu Bar"></MenuItem> 

                                <MenuItem Text="Bookmarks Toolbar"></MenuItem> 

                                <MenuItem Text="Customize"></MenuItem> 

                            </MenuItems> 

                        </MenuItem> 

                        <MenuItem Text="Zoom"> 

                            <MenuItems> 

                                <MenuItem Text="Zoom In"></MenuItem> 

                                <MenuItem Text="Zoom Out"></MenuItem> 

                                <MenuItem Text="Reset"></MenuItem> 

                            </MenuItems> 

                        </MenuItem> 

                        <MenuItem Text="Full Screen"></MenuItem> 

                    </MenuItems> 

                </MenuItem> 

                <MenuItem Text="Tools"> 

                    <MenuItems> 

                        <MenuItem Text="Spelling & Grammar"></MenuItem> 

                        <MenuItem Text="Customize"></MenuItem> 

                        <MenuItem Separator="true"></MenuItem> 

                        <MenuItem Text="Options"></MenuItem> 

                    </MenuItems> 

                </MenuItem> 

                <MenuItem Text="Help"></MenuItem> 

            </MenuItems> 

        </SfMenu> 

 

    </div> 

</div> 

 

<style> 

    .e-menu-container ul, 

    .e-contextmenu-container ul.e-ul { 

        font-size:20px; 

        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 

    } 

</style> 

 

 

For your reference we have prepared a sample based on this, please refer below sample link. 

 

Sample Link:  https://www.syncfusion.com/downloads/support/forum/159721/ze/MenuBarCustomStyle190311807  

 

Please let us know, if you need any further assistance. 

 

Regards, 

Mohan kumar R