microsoft / microsoft/fluentui-blazor
[dev-v5] AppBar Overflow menu is rendered outside the viewport on small screens
@vnbaaij is already working on this.
Since Sep 14, 2026.
- 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
- Clone the repository:
https://github.com/matteoparlato/AppBarRepro2 - Run the application.
- Open the browser DevTools.
- Toggle the Device emulation.
- Select an iPhone device template (for example, iPhone SE/12/13).
- 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.
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.