Menu overflow behavior of the Pivot component doesn't work

[Keshav-Pandey]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

Hi Team,

I’ve been using BitBlazorUI along with the boilerplate and have really been enjoying it. However, I’ve run into an issue with the Pivot component specifically, its overflow behavior doesn’t seem to be working as expected. It might also be helpful to include an overflow example in the documentation, since the API section references it but the behavior doesn’t appear functional.

I’ve tested both BitPivotOverflowBehavior.Menu and BitPivotOverflowBehavior.Scroll.

From what I found in the repo’s DeepWiki, the menu option currently has no implemented CSS. As for the scroll option, I was only able to get it working when the parent container (e.g., a div) had a fixed max‑width—only then did the scroll slider appear. I would have expected it to work even when placed inside a BitStack, BitElement for example.

Relevant thread:

• BitPivot overflow behavior #432

Thanks again for all the great work you’re contributing to the open‑source community.

Expected Behavior

A menu button should be visible that shows the hidden pivot items

Steps To Reproduce

Here is some sample code to reproduce the issue

<div style="max-width: 400px; width: 100%;">
        <BitPivot HeaderOnly
                OverflowBehavior="BitPivotOverflowBehavior.Menu">
            <BitPivotItem HeaderText="Home" Icon="@("fa-solid fa-house")" />
            <BitPivotItem HeaderText="Heart" Icon="@BitIconInfo.Css("fa-solid fa-heart")" />
            <BitPivotItem HeaderText="Rocket" Icon="@BitIconInfo.Fa("solid rocket")" />
            <BitPivotItem HeaderText="Home 2" Icon="@("fa-solid fa-house")" />
            <BitPivotItem HeaderText="Heart 2" Icon="@BitIconInfo.Css("fa-solid fa-heart")" />
            <BitPivotItem HeaderText="Rocket 2" Icon="@BitIconInfo.Fa("solid rocket")" />
            <BitPivotItem HeaderText="Home 3" Icon="@("fa-solid fa-house")" />
            <BitPivotItem HeaderText="Heart 3" Icon="@BitIconInfo.Css("fa-solid fa-heart")" />
            <BitPivotItem HeaderText="Rocket 3" Icon="@BitIconInfo.Fa("solid rocket")" />
        </BitPivot>
</div>

Exceptions (if any)

No response

.NET Version

10

Anything else?

No response

[yasmoradi]

Thank you for contacting us.
We are investigating this issue and will update you on the result soon.

[msynk]

duplicate and simpler version of #432