What component could I use to make a bottom navigation bar?

[Shai]

I would like to make a navigation bar like the following one, how could I achieve that?

I've tried SfMenu component but isn't possible to change icon position.

[Sangeetha Priya Murugan]

Hi Shai, 

Thank you for contacting syncfusion support. 

We have checked your reported requirement and it can be achievable in our Menu component by using the cssClass property with some CSS customization in it. 

Code Example: 

    <div class="menu-control"> 

        <SfMenu TValue="MenuItem" CssClass="e-custom"> 

            <MenuItems> 

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

                    

                </MenuItem> 

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

                    

                </MenuItem> 

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

                    

                </MenuItem> 

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

                     

                </MenuItem> 

            </MenuItems> 

        </SfMenu> 

    </div>> 

        </SfMenu> 

 

<style>    

 /* display the icon at the top*/ 

    .e-custom .e-menu-wrapper ul .e-menu-item, .e-menu-container ul .e-menu-item { 

        flex-direction: column; 

        height: 75px; 

        padding: 0px 100px; 

    } 

    /* display the menu at the bottom*/ 

    .menu-control { 

        position: absolute; 

        bottom: 0px; 

    } 

</style> 

 

For your convenience we have prepared the sample, based on our above suggestion. Please find the link below. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/171613/ze/Server-Menu76471423  

Documentation Link: https://blazor.syncfusion.com/documentation/menu-bar/style-and-appearance  

Could you please check the above sample and get back to us if you need further assistance on this? 

Regards, 

Sangeetha M