microsoft / microsoft/fluentui-blazor

[dev-v5] AppBar Overflow menu is rendered outside the viewport on small screens

Open
#5,215 1 comment 3 reactions 1 assignee View on GitHub

@vnbaaij is already working on this.

Since Sep 14, 2026.

status:needs-investigation v5
Dominant language
C#
Stars
4.8k
Forks
483
Avg merge
14h 41m
Merged PRs (30d)
68

Description

🐛 Bug Report

The FluentAppBar overflow menu is not visible on small screens because it
is positioned outside the viewport.

💻 Repro or Code Sample

A ready-to-run reproduction is available here:

https://github.com/matteoparlato/AppBarRepro2

Steps to reproduce
  1. Clone the repository:
    https://github.com/matteoparlato/AppBarRepro2
  2. Run the application.
  3. Open the browser DevTools.
  4. Toggle the Device emulation.
  5. Select an iPhone device template (for example, iPhone SE/12/13).
  6. Click the overflow (...) button.

🤔 Expected Behavior

The overflow menu should be displayed entirely within the visible viewport.

On small screens, the menu should automatically adjust its position when
there is not enough space around the overflow button, so that all collapsed
FluentAppBarItem elements remain visible and accessible.

😯 Current Behavior

When using an iPhone device template in Edge DevTools, the overflow menu is
positioned outside the visible viewport.

As a result, the overflow menu is not visible and the collapsed
FluentAppBarItem elements cannot be accessed.

Image

The issue can be reproduced with RC4.

RC5 is currently affected by a different AppBar issue (#5214), so RC4 is
used for this reproduction.

💁 Possible Solution

The overflow menu should take the available viewport space into account when
being positioned.

The popover positioning should prevent the overflow menu from being rendered
outside the visible viewport on small screens.

🔦 Context

We use a horizontal FluentAppBar as a bottom navigation/action bar on
small screens.

When there are more items than can fit horizontally, the overflow menu is
required to provide access to the remaining actions.

On mobile-sized viewports, the overflow menu can be positioned outside the
viewport, making the collapsed actions inaccessible.

🌍 Your Environment

OS & Device: Microsoft Windows 10.0.26200 (X64)
Browser: Microsoft Edge / Google Chrome
.NET and Fluent UI Blazor library Version: .NET 10.0.11 / Fluent UI Blazor RC4 5.0.0-rc.4-26180.1

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.