SfToolbar - menu itens - with arrows in blazor

[alexandre trapp]

Hi, I would like help configuring the side menu toolbar, it has these arrows that I couldn't remove, I use the SyncFucion SfToolbar component for blazor, version 23.1.44

Attachment: printscreen_and_code_6656eb5c.rar

[Satheesh Kumar Balasubramanian]

Hi Alexandre,

We let you know that arrow will render when toolbar content exceeds the width of the toolbar. Based on the shared image, we suspect that you have override the toolbar width from your application end. So, please increase the toolbar width to remove the arrow.

Also, you can use SfAppBar to achieve your requirement. Please refer to the below demo and UG for your reference.

Demo: https://blazor.syncfusion.com/demos/appbar/default-functionalities?theme=fluent

UG: https://blazor.syncfusion.com/documentation/appbar/getting-started

NavMenu.razor:

<div id="syncHead">

    <SfToolbar>

        <ToolbarItems>

            <ToolbarItem TabIndex=0 Id="synctollbar" PrefixIcon="e-icons e-menu" TooltipText="Menu"></ToolbarItem>

            <ToolbarItem TabIndex=0 Align="ItemAlign.Center">

                <Template>

                    <div class="e-folder" style="margin: 10px">

                        <div class="e-folder-name">

                            <a rel='nofollow' href="/" style="text-decoration: none; color: black">VitaWeb</a>

                        </div>

                    </div>

                </Template>

            </ToolbarItem>

        </ToolbarItems>

    </SfToolbar>

    <SfAppBar ColorMode="AppBarColor.Light">

        <SfButton aria-label="menu" CssClass="e-inherit menu" IconCss="e-icons e-menu"></SfButton>

        <div class="e-folder" style="margin: 90px">

            <div class="e-folder-name">

                <a rel='nofollow' href="/" style="text-decoration: none; color: black">VitaWeb</a>

            </div>

        </div>

    </SfAppBar>

</div>

Regards,

Satheesh

Attachment: SyncfusionBlazorApp_d2425736.zip