What is the ribbon and how do I remove it?

I have updated a maui / blazor hybrid app from Maui 8.0.20 to 8.0.90 to fix a blank screen issue in iOS 18.

now it brings up a bar or ribbon at the top of the page with a button in the middle of it.

its pushing the bottom of the app down so i cant see the footer.

What is this and how do i remove it?

Note: this does not appear in the windows version of the app.

This is the new tab bar behavior that Apple implemented for iOS 18. Unfortunately, it seems Apple did not provide a way to opt-out of it.

At the time of writing we're figuring out what we're doing with this in the .NET MAUI SDK, because the situation as you describe here seems a bit strange.

If you want to hide it right now, or play with this new behavior you can use the below ShellRenderer to access the new properties.

By using TabBarHidden and setting it to true that will go away, however remember that this is the new tab bar so if you want to implement tabs in your app, by hiding it people will have no way to navigate between them.

If you have any thoughts about an implementation, please add those in the .NET MAUI issue in the repo.

using CoreGraphics;
using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;
using UIKit;

namespace ios18test;

public sealed class MyShellRenderer : ShellRenderer
{
    private sealed class MyShellTabBarAppearanceTracker : ShellTabBarAppearanceTracker
    {
        public override void SetAppearance(UITabBarController controller, ShellAppearance appearance)
        {
            base.SetAppearance(controller, appearance);

            //controller.Mode = UITabBarControllerMode.TabBar;
            controller.TabBarHidden = true;
        }
    }
    protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker() => new MyShellTabBarAppearanceTracker();
}

And in your MauiProgram.cs add:

var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            #if IOS
            // This was added
            .ConfigureMauiHandlers(handlers =>
            {
                handlers.AddHandler<Shell, MyShellRenderer>();
            })
            #endif
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });