ProductUI Action menu - PrimerBlazor

Basic Action Menu

<PrimerActionMenu>
    <ButtonContent>
        <PrimerButton Variant="ButtonVariant.Default" Size="ButtonSize.Small" TrailingIcon="IconName.TriangleDown16">
            Open menu
        </PrimerButton>
    </ButtonContent>
    <OverlayContent>
        <PrimerActionList>
            <PrimerActionListItem>Item One</PrimerActionListItem>
            <PrimerActionListItem>Item Two</PrimerActionListItem>
        </PrimerActionList>
    </OverlayContent>
</PrimerActionMenu>

Action Menu with Selection

<PrimerActionMenu>
    <ButtonContent>
        <PrimerButton Variant="ButtonVariant.Default" Size="ButtonSize.Small" TrailingIcon="IconName.TriangleDown16">
            Open menu
        </PrimerButton>
    </ButtonContent>
    <OverlayContent>
        <PrimerActionList>
            @for (int i = 0; i < Items.Count; i++)
            {
                var index = i;
                var label = Items[i];

                <PrimerActionListItem SelectionVariant="SelectionVariant"
                                        IsSelected="@(SelectionVariant == ActionSelectionVariant.Single
                                        ? _selectedIndex == index
                                        : _selectedIndices.Contains(index))"
                                        OnClick="@(() => Toggle(index))">
                    <LeadingVisual>
                        <PrimerAvatar ImageUrl="/images/logo_small.png" Size="2" IsCircle="true" ClassName="mr-2" />
                    </LeadingVisual>
                    <ChildContent>
                        @label
                    </ChildContent>
                </PrimerActionListItem>
            }
        </PrimerActionList>
    </OverlayContent>
</PrimerActionMenu>

<PrimerActionMenu>
    <ButtonContent>
        <PrimerIconButton Variant="ButtonVariant.Default" Size="ButtonSize.Small" Icon="IconName.TriangleDown16">
        </PrimerIconButton>
    </ButtonContent>
    <OverlayContent>
        <PrimerActionList>
            @for (int i = 0; i < Items.Count; i++)
            {
                var index = i;
                var label = Items[i];

                <PrimerActionListItem SelectionVariant="SelectionVariant"
                                        IsSelected="@(SelectionVariant == ActionSelectionVariant.Single
                            ? _selectedIndex == index
                            : _selectedIndices.Contains(index))"
                                        OnClick="@(() => Toggle(index))">
                    <LeadingVisual>
                        <PrimerAvatar ImageUrl="/images/logo_small.png" Size="2" IsCircle="true" ClassName="mr-2" />
                    </LeadingVisual>
                    <ChildContent>
                        @label
                    </ChildContent>
                </PrimerActionListItem>
            }
        </PrimerActionList>
    </OverlayContent>
</PrimerActionMenu>

Action Menu via Overlay

<PrimerButton OnClick="ToggleMenu1" Size="ButtonSize.Small"
                    OnElementReferenceCaptured="OnTargetRefCaptured1"
                    TrailingIcon="IconName.TriangleDown16">
        Open menu
    </PrimerButton>

    <PrimerAnchoredOverlay IsOpen="@IsOpen1"
                            WrapperRef="@TriggerRef1" OnClose="CloseMenu1">
        <OverlayContent>


            <PrimerActionList ShowDividers>
                @for (int i = 0; i < Items.Count; i++)
                {
                    var index = i;
                    var label = Items[i];
                    <PrimerActionListItem SelectionVariant="ActionSelectionVariant.Multiple"
                                            IsSelected="@(SelectionVariant == ActionSelectionVariant.Single
                                    ? _selectedIndex == index
                                    : _selectedIndices.Contains(index))"
                                            OnClick="@(() => Toggle(index))">

                        <ChildContent>@label</ChildContent>
                    </PrimerActionListItem>
                }
            </PrimerActionList>
        </OverlayContent>
    </PrimerAnchoredOverlay>
<PrimerIconButton Icon="IconName.TriangleDown16"
                    OnClick="ToggleMenu2"
                    OnElementReferenceCaptured="OnTargetRefCaptured2" />

<PrimerAnchoredOverlay IsOpen="@IsOpen2"
                        WrapperRef="@TriggerRef2" OnClose="CloseMenu2">
    <OverlayContent>
        <PrimerActionList ShowDividers>
            @for (int i = 0; i < Items.Count; i++)
            {
                var index = i;
                var label = Items[i];
                <PrimerActionListItem SelectionVariant="ActionSelectionVariant.Multiple"
                                        IsSelected="@(SelectionVariant == ActionSelectionVariant.Single
                                ? _selectedIndex == index
                                : _selectedIndices.Contains(index))"
                                        OnClick="@(() => Toggle(index))">

                    <ChildContent>@label</ChildContent>
                </PrimerActionListItem>
            }
        </PrimerActionList>
    </OverlayContent>
</PrimerAnchoredOverlay>

<PrimerButtonGroup>
    <PrimerIconButton Size="ButtonSize.Small" Icon="IconName.Copilot16">
    </PrimerIconButton>
    <PrimerIconButton ClassName="is-last" Icon="IconName.TriangleDown16" OnClick="ToggleMenu3" OnElementReferenceCaptured="OnTargetRefCaptured3" />
    <PrimerAnchoredOverlay IsOpen="@IsOpen3"
                            WrapperRef="@TriggerRef3" OnClose="CloseMenu3">
        <OverlayContent>
            <PrimerActionList>
                @for (int i = 0; i < Items.Count; i++)
                {
                    var index = i;
                    var label = Items[i];

                    <PrimerActionListItem SelectionVariant="SelectionVariant"
                                            IsSelected="@(SelectionVariant == ActionSelectionVariant.Single
                                ? _selectedIndex == index
                                : _selectedIndices.Contains(index))"
                                            OnClick="@(() => Toggle(index))">
                        <LeadingVisual>
                            <PrimerAvatar ImageUrl="/images/logo_small.png" Size="2" IsCircle="true" ClassName="mr-2" />
                        </LeadingVisual>
                        <ChildContent>
                            @label
                        </ChildContent>
                    </PrimerActionListItem>
                }
            </PrimerActionList>
        </OverlayContent>
    </PrimerAnchoredOverlay>
</PrimerButtonGroup>

Action Menu with Visuals and Description

<PrimerActionMenu>
    <ButtonContent>
        <PrimerButton Variant="ButtonVariant.Default" Size="ButtonSize.Small" TrailingIcon="IconName.TriangleDown16">
            Open menu
        </PrimerButton>
    </ButtonContent>
    <OverlayContent>
        <PrimerActionList ShowDividers="true">
            <PrimerActionListItem DescriptionVariant="ActionDescriptionVariant.Inline">
                <LeadingVisual>
                    <PrimerAvatar ImageUrl="/images/logo_small.png" Size="2" IsCircle="true" ClassName="mr-2" />
                </LeadingVisual>
                <ChildContent>
                    Item One
                </ChildContent>
                <Description>
                    Inline description
                </Description>
            </PrimerActionListItem>
            <PrimerActionListItem DescriptionVariant="ActionDescriptionVariant.Block">
                <LeadingVisual>
                    <PrimerAvatar ImageUrl="/images/logo_small.png" Size="2" IsCircle="true" ClassName="mr-2" />
                </LeadingVisual>
                <ChildContent>
                    Item Two
                </ChildContent>
                <Description>
                    Block description
                </Description>
            </PrimerActionListItem>
        </PrimerActionList>
    </OverlayContent>
</PrimerActionMenu>

ActionMenu Options

Available options for ActionMenu component

Name	Description	Default Value	CSS Class
ButtonContent	Content for the menu button	-	-
OverlayContent	Dropdown menu content	-	-

private bool IsOpen1;
private bool IsOpen2;
private bool IsOpen3;
private ElementReference TriggerRef1;
private ElementReference TriggerRef2;
private ElementReference TriggerRef3;

private HashSet<int> SelectedIndices = new();
private readonly ActionSelectionVariant SelectionVariant = ActionSelectionVariant.Multiple;
private int _selectedIndex = -1;
private HashSet<int> _selectedIndices = new();
private List<string> Items = new() { "Item One", "Item Two", "Item Three" };

private void ToggleMenu1()
{
    if (TriggerRef1.Context == null) return;
    IsOpen1 = !IsOpen1;
}
private void ToggleMenu2()
{
    if (TriggerRef2.Context == null) return;
    IsOpen2 = !IsOpen2;
}
private void ToggleMenu3()
{
    if (TriggerRef3.Context == null) return;
    IsOpen3 = !IsOpen3;
}
private void CloseMenu1() => IsOpen1 = false;
private void CloseMenu2() => IsOpen2 = false;
private void CloseMenu3() => IsOpen3 = false;

private void OnTargetRefCaptured1(ElementReference el) => TriggerRef1 = el;
private void OnTargetRefCaptured2(ElementReference el) => TriggerRef2 = el;
private void OnTargetRefCaptured3(ElementReference el) => TriggerRef3 = el;
private void Toggle(int index)
{
    if (SelectionVariant == ActionSelectionVariant.Single)
    {
        _selectedIndex = index;
    }
    else
    {
        if (_selectedIndices.Contains(index))
            _selectedIndices.Remove(index);
        else
            _selectedIndices.Add(index);
    }
}