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

SbMenuItem

A menu item component used within SbMenu for individual menu options.

Parameters

Parameter	Type	Default	Description
Text	string?	null	Menu item text
Shortcut	string?	null	Keyboard shortcut hint text
Disabled	bool	false	Whether the item is disabled
Class	string?	null	Additional CSS classes

Events

Event	Type	Description
OnClick	EventCallback	Fired when the item is clicked

Templates / Slots

Slot	Type	Description
Icon	RenderFragment	Icon content displayed before text
ChildContent	RenderFragment	Custom content (replaces Text)

Cascading Parameters

Parameter	Type	Description
ParentMenu	SbMenu	Parent menu container

CSS Classes

• sb-menu-item - Base class
• sb-menu-item--disabled - When disabled
• sb-menu-item__icon - Icon container
• sb-menu-item__text - Text container
• sb-menu-item__shortcut - Shortcut hint

Accessibility

• Uses role="menuitem"
• Supports keyboard activation (Enter/Space)
• tabindex managed for keyboard navigation

Examples

Basic Usage

<SbMenu @bind-Open="isOpen">
    <AnchorContent>
        <SbButton OnClick="() => isOpen = !isOpen">Menu</SbButton>
    </AnchorContent>
    <ChildContent>
        <SbMenuItem Text="Option 1" OnClick="HandleOption1" />
        <SbMenuItem Text="Option 2" OnClick="HandleOption2" />
        <SbMenuItem Text="Option 3" OnClick="HandleOption3" />
    </ChildContent>
</SbMenu>

With Icon

<SbMenuItem Text="Edit" OnClick="Edit">
    <Icon>
        <SbIcon Name="edit" Size="SbSize.Sm" />
    </Icon>
</SbMenuItem>

With Shortcut

<SbMenuItem Text="Save" Shortcut="Ctrl+S" OnClick="Save" />
<SbMenuItem Text="Copy" Shortcut="Ctrl+C" OnClick="Copy" />
<SbMenuItem Text="Paste" Shortcut="Ctrl+V" OnClick="Paste" />

Disabled Item

<SbMenuItem Text="Delete" Disabled="@(!canDelete)" OnClick="Delete">
    <Icon><SbIcon Name="trash" /></Icon>
</SbMenuItem>

@code {
    private bool canDelete = false;
}

Custom Content

<SbMenuItem OnClick="SelectUser">
    <ChildContent>
        <SbStack Direction="SbStackDirection.Row" Gap="2" Align="SbAlign.Center">
            <img src="/avatar.jpg" alt="John" class="avatar-sm" />
            <SbStack Gap="0">
                <SbText>John Doe</SbText>
                <SbText Size="xs" Color="muted">john@example.com</SbText>
            </SbStack>
        </SbStack>
    </ChildContent>
</SbMenuItem>

With Status Indicator

<SbMenuItem OnClick="() => SetStatus('online')">
    <Icon>
        <span class="status-dot status-dot--online"></span>
    </Icon>
    <ChildContent>Online</ChildContent>
</SbMenuItem>

<SbMenuItem OnClick="() => SetStatus('away')">
    <Icon>
        <span class="status-dot status-dot--away"></span>
    </Icon>
    <ChildContent>Away</ChildContent>
</SbMenuItem>

<SbMenuItem OnClick="() => SetStatus('dnd')">
    <Icon>
        <span class="status-dot status-dot--dnd"></span>
    </Icon>
    <ChildContent>Do Not Disturb</ChildContent>
</SbMenuItem>

Danger Item

<SbMenuItem Text="Delete" OnClick="Delete" Class="menu-item-danger">
    <Icon><SbIcon Name="trash" Color="SbColor.Danger" /></Icon>
</SbMenuItem>

Complete File Menu Example

<SbMenu @bind-Open="fileMenuOpen">
    <AnchorContent>
        <SbButton Variant="SbButtonVariant.Ghost" OnClick="() => fileMenuOpen = !fileMenuOpen">
            File
        </SbButton>
    </AnchorContent>
    <ChildContent>
        <SbMenuItem Text="New" Shortcut="Ctrl+N" OnClick="NewFile">
            <Icon><SbIcon Name="file-plus" /></Icon>
        </SbMenuItem>
        <SbMenuItem Text="Open" Shortcut="Ctrl+O" OnClick="OpenFile">
            <Icon><SbIcon Name="folder-open" /></Icon>
        </SbMenuItem>
        <SbMenuItem Text="Open Recent">
            <Icon><SbIcon Name="clock" /></Icon>
        </SbMenuItem>
        
        <SbDivider />
        
        <SbMenuItem Text="Save" Shortcut="Ctrl+S" OnClick="SaveFile">
            <Icon><SbIcon Name="save" /></Icon>
        </SbMenuItem>
        <SbMenuItem Text="Save As..." Shortcut="Ctrl+Shift+S" OnClick="SaveFileAs">
            <Icon><SbIcon Name="save" /></Icon>
        </SbMenuItem>
        
        <SbDivider />
        
        <SbMenuItem Text="Export" OnClick="Export">
            <Icon><SbIcon Name="download" /></Icon>
        </SbMenuItem>
        <SbMenuItem Text="Print" Shortcut="Ctrl+P" OnClick="Print">
            <Icon><SbIcon Name="printer" /></Icon>
        </SbMenuItem>
        
        <SbDivider />
        
        <SbMenuItem Text="Close" Shortcut="Ctrl+W" OnClick="CloseFile">
            <Icon><SbIcon Name="x" /></Icon>
        </SbMenuItem>
    </ChildContent>
</SbMenu>