sufi-blazor/docs/components/overlays/SbMenu.md

SbMenu

A dropdown menu component with keyboard navigation support.

Parameters

Parameter	Type	Default	Description
Open	bool	false	Whether the menu is open
Placement	SbPlacement	BottomStart	Menu placement relative to anchor
CloseOnItemClick	bool	true	Close when clicking a menu item
Class	string?	null	Additional CSS classes

Events

Event	Type	Description
OpenChanged	EventCallback<bool>	Fired when open state changes

Templates / Slots

Slot	Type	Description
AnchorContent	RenderFragment	Content that triggers the menu
ChildContent	RenderFragment	Menu items (SbMenuItem components)

Keyboard Navigation

• ArrowDown: Move to next item
• ArrowUp: Move to previous item
• Home: Move to first item
• End: Move to last item
• Enter/Space: Activate focused item
• Escape: Close menu
• Tab: Close menu

CSS Classes

• sb-menu-anchor - Anchor wrapper
• sb-menu - Menu container
• sb-menu--{placement} - Placement variants

Accessibility

• Uses role="menu" on the menu
• Uses role="menuitem" on items
• Supports keyboard navigation

Examples

Basic Usage

<SbMenu @bind-Open="isOpen">
    <AnchorContent>
        <SbButton OnClick="() => isOpen = !isOpen">
            Options <SbIcon Name="chevron-down" />
        </SbButton>
    </AnchorContent>
    <ChildContent>
        <SbMenuItem Text="Edit" OnClick="Edit" />
        <SbMenuItem Text="Duplicate" OnClick="Duplicate" />
        <SbMenuItem Text="Delete" OnClick="Delete" />
    </ChildContent>
</SbMenu>

@code {
    private bool isOpen = false;
}

With Icons

<SbMenu @bind-Open="isOpen">
    <AnchorContent>
        <SbIconButton Icon="more-vertical" OnClick="() => isOpen = !isOpen" />
    </AnchorContent>
    <ChildContent>
        <SbMenuItem Text="Edit" OnClick="Edit">
            <Icon><SbIcon Name="edit" /></Icon>
        </SbMenuItem>
        <SbMenuItem Text="Copy" OnClick="Copy">
            <Icon><SbIcon Name="copy" /></Icon>
        </SbMenuItem>
        <SbMenuItem Text="Delete" OnClick="Delete">
            <Icon><SbIcon Name="trash" /></Icon>
        </SbMenuItem>
    </ChildContent>
</SbMenu>

With Keyboard Shortcuts

<SbMenu @bind-Open="isOpen">
    <AnchorContent>
        <SbButton OnClick="() => isOpen = !isOpen">File</SbButton>
    </AnchorContent>
    <ChildContent>
        <SbMenuItem Text="New" Shortcut="Ctrl+N" OnClick="New" />
        <SbMenuItem Text="Open" Shortcut="Ctrl+O" OnClick="Open" />
        <SbMenuItem Text="Save" Shortcut="Ctrl+S" OnClick="Save" />
        <SbMenuItem Text="Save As..." Shortcut="Ctrl+Shift+S" OnClick="SaveAs" />
    </ChildContent>
</SbMenu>

With Disabled Items

<SbMenu @bind-Open="isOpen">
    <AnchorContent>
        <SbButton OnClick="() => isOpen = !isOpen">Actions</SbButton>
    </AnchorContent>
    <ChildContent>
        <SbMenuItem Text="View" OnClick="View" />
        <SbMenuItem Text="Edit" OnClick="Edit" Disabled="@(!canEdit)" />
        <SbMenuItem Text="Delete" OnClick="Delete" Disabled="@(!canDelete)" />
    </ChildContent>
</SbMenu>

Different Placements

<SbMenu @bind-Open="isOpen" Placement="SbPlacement.BottomEnd">
    <AnchorContent>
        <SbButton OnClick="() => isOpen = !isOpen">Bottom End</SbButton>
    </AnchorContent>
    <ChildContent>
        <SbMenuItem Text="Option 1" />
        <SbMenuItem Text="Option 2" />
    </ChildContent>
</SbMenu>

<SbMenu @bind-Open="isOpen2" Placement="SbPlacement.TopStart">
    <AnchorContent>
        <SbButton OnClick="() => isOpen2 = !isOpen2">Top Start</SbButton>
    </AnchorContent>
    <ChildContent>
        <SbMenuItem Text="Option 1" />
        <SbMenuItem Text="Option 2" />
    </ChildContent>
</SbMenu>

User Menu

<SbMenu @bind-Open="userMenuOpen">
    <AnchorContent>
        <button class="user-avatar-btn" @onclick="() => userMenuOpen = !userMenuOpen">
            <img src="/avatar.jpg" alt="@user.Name" />
            <span>@user.Name</span>
            <SbIcon Name="chevron-down" />
        </button>
    </AnchorContent>
    <ChildContent>
        <SbMenuItem Text="Profile" OnClick="GoToProfile">
            <Icon><SbIcon Name="user" /></Icon>
        </SbMenuItem>
        <SbMenuItem Text="Settings" OnClick="GoToSettings">
            <Icon><SbIcon Name="settings" /></Icon>
        </SbMenuItem>
        <SbDivider />
        <SbMenuItem Text="Sign Out" OnClick="SignOut">
            <Icon><SbIcon Name="log-out" /></Icon>
        </SbMenuItem>
    </ChildContent>
</SbMenu>

Keep Open After Click

<SbMenu @bind-Open="isOpen" CloseOnItemClick="false">
    <AnchorContent>
        <SbButton OnClick="() => isOpen = !isOpen">Multi-Select</SbButton>
    </AnchorContent>
    <ChildContent>
        <SbMenuItem OnClick="() => ToggleOption(1)">
            <SbCheckbox Value="@options.Contains(1)" />
            Option 1
        </SbMenuItem>
        <SbMenuItem OnClick="() => ToggleOption(2)">
            <SbCheckbox Value="@options.Contains(2)" />
            Option 2
        </SbMenuItem>
        <SbMenuItem OnClick="() => ToggleOption(3)">
            <SbCheckbox Value="@options.Contains(3)" />
            Option 3
        </SbMenuItem>
    </ChildContent>
</SbMenu>

Row Actions Menu

<SbDataGrid Items="@items">
    <SbColumn Field="Name" Title="Name" />
    <SbColumn Field="Status" Title="Status" />
    <SbColumn Title="Actions" Width="60px">
        <CellTemplate Context="cell">
            <SbMenu>
                <AnchorContent>
                    <SbIconButton Icon="more-vertical" Size="SbSize.Sm" />
                </AnchorContent>
                <ChildContent>
                    <SbMenuItem Text="View" OnClick="() => View(cell.Item)" />
                    <SbMenuItem Text="Edit" OnClick="() => Edit(cell.Item)" />
                    <SbDivider />
                    <SbMenuItem Text="Delete" OnClick="() => Delete(cell.Item)">
                        <Icon><SbIcon Name="trash" Color="SbColor.Danger" /></Icon>
                    </SbMenuItem>
                </ChildContent>
            </SbMenu>
        </CellTemplate>
    </SbColumn>
</SbDataGrid>