How to Enable Multiline Content in Blazor AppBar Using CSS?

To enable multiline content in the menubar within the Blazor AppBar, you can use CSS to control the wrapping and layout of the content. Follow the below shared steps to achieve your requirement:

1. Set the CssClass for the AppBar: Ensure that the content within the rows can wrap and appear as multiline.
2. Adjust the row and menu item CSS: Make sure the rows and menu items are flexible and can accommodate multiline text.

[index.razor]

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar CssClass="footercls" ColorMode="AppBarColor.Dark" Mode="AppBarMode.Prominent" IsSticky="false" Position="AppBarPosition.Bottom">
    <label />
    <AppBarSpacer />
    <div class="row multiline-content">
        <SfMenu CssClass="e-inherit" TValue="MenuItem" EnableScrolling="true">
            <MenuItems>
                <MenuItem Text="Home" Url="/" IconCss="e-icons e-home"></MenuItem>
                <MenuItem Text="Family Browser" Url="/familybrowser"></MenuItem>
                <MenuItem Text="Bonus Tools" Url="/bonustools"></MenuItem>
                <MenuItem Text="Custom API" Url="/customapi"></MenuItem>
                <MenuItem Text="Blog" Url="/pages/web/blog"></MenuItem>
                <MenuItem Text="Support" Url="/support"></MenuItem>
                <MenuItem Text="Downloads" Url="/downloads"></MenuItem>
            </MenuItems>
        </SfMenu>
    </div>

    <div class="row multiline-content">
        <SfMenu CssClass="e-inherit" TValue="MenuItem" EnableScrolling="true">
            <MenuItems>
                <MenuItem Text="Twitter" Url="/" IconCss="bi bi-twitter"></MenuItem>
                <MenuItem Text="Facebook" Url="/" IconCss="bi bi-facebook"></MenuItem>
                <MenuItem Text="Instagram" Url="/" IconCss="bi bi-instagram"></MenuItem>
            </MenuItems>
        </SfMenu>
    </div>

    <AppBarSpacer />
    <label />
</SfAppBar>

<style>

    .footercls {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .multiline-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .multiline-content .e-menu-item {
        flex: 1 1 auto;
        white-space: normal;
    }

    .e-menu-wrapper .e-menu .e-menu-item .e-menu-url, .e-menu-container .e-menu .e-menu-item .e-menu-url{
      color: white !important;
    }

</style>

Sample link: https://blazorplayground.syncfusion.com/hNVfDGrSVhmRgjOW

Output screenshot:

Conclusion