Layout

TwMenu

TwMenu is a Blazor menu button component that opens a keyboard friendly menu of actions, tick options and labelled groups.

Last updated 19 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Put TwMenuItems in a TwMenu. Choosing an item runs its OnClick, closes the menu and returns focus to the button. The button tells screen readers that it opens a menu and whether the menu is open.

Nothing chosen yet.

RAZOR

<TwMenu Id="actions-menu" Label="Actions" Icon="Icon.Three_Dots_Vertical">
    <TwMenuItem Label="Edit" StartIcon="Icon.Pencil" OnClick="@(() => lastAction = "Edit")" />
    <TwMenuItem Label="Duplicate" StartIcon="Icon.Copy" OnClick="@(() => lastAction = "Duplicate")" />
    <TwMenuItem Label="Archive" StartIcon="Icon.Archive" OnClick="@(() => lastAction = "Archive")" />
</TwMenu>
<p class="mt-3" role="status">@(lastAction is null ? "Nothing chosen yet." : $"You chose {lastAction}.")</p>

CSHARP

@code {
    private string? lastAction;
}

Icon only button

Set IconOnly to show just the Icon. Give it an AriaLabel, which names the button for screen readers and shows as its tooltip; without one it is called "Options".

RAZOR

<TwMenu Id="icon-menu" Icon="Icon.Three_Dots_Vertical" IconOnly AriaLabel="Row options">
    <TwMenuItem Label="Open" />
    <TwMenuItem Label="Share" />
    <TwMenuItem Label="Delete" />
</TwMenu>

Options that can be ticked

A TwMenuCheckboxItem is an option that is on or off. Bind @bind-Checked. Choosing it flips the tick and leaves the menu open, so several options can be changed in a row; set CloseOnClick to close it instead. Screen readers announce each option as ticked or not.

Grid on, rulers off, snapping off.

RAZOR

<TwMenu Id="checkbox-menu" Label="View" Icon="Icon.Eye">
    <TwMenuCheckboxItem Label="Show grid" @bind-Checked="showGrid" />
    <TwMenuCheckboxItem Label="Show rulers" @bind-Checked="showRulers" />
    <TwMenuCheckboxItem Label="Snap to grid" @bind-Checked="snapToGrid" Disabled="@(!showGrid)" />
</TwMenu>
<p class="mt-3">Grid @(showGrid ? "on" : "off"), rulers @(showRulers ? "on" : "off"), snapping @(snapToGrid ? "on" : "off").</p>

CSHARP

@code {
    private bool showGrid = true;
    private bool showRulers;
    private bool snapToGrid;
}

Groups and dividers

Use TwMenuGroup to put items under a heading, which screen readers read as the group's name, and TwMenuDivider for a line between items. The arrow keys pass over both. A Disabled item is skipped and cannot be chosen.

RAZOR

<TwMenu Id="group-menu" Label="Column options" Icon="Icon.Layout_Three_Columns">
    <TwMenuGroup Label="Sort">
        <TwMenuItem Label="Sort ascending" StartIcon="Icon.Sort_Up" />
        <TwMenuItem Label="Sort descending" StartIcon="Icon.Sort_Down" />
    </TwMenuGroup>
    <TwMenuDivider />
    <TwMenuGroup Label="Column">
        <TwMenuItem Label="Move left" StartIcon="Icon.Arrow_Left" Disabled />
        <TwMenuItem Label="Move right" StartIcon="Icon.Arrow_Right" />
        <TwMenuItem Label="Hide column" StartIcon="Icon.Eye_Slash" />
    </TwMenuGroup>
</TwMenu>

Inside a scrolling container

The menu is placed with fixed positioning, so it is not clipped by a container that scrolls, such as a table, and it flips above its button or towards the start when there is no room. Scrolling the page closes it on desktop.

File	Actions
report.pdf
budget.xlsx
notes.txt
logo.svg

RAZOR

<TwTable Id="menu-table" AriaLabel="Files" MaxHeight="12rem">
    <TableHeader>
        <tr>
            <th scope="col" class="px-6 py-3">File</th>
            <th scope="col" class="px-6 py-3"><span class="sr-only">Actions</span></th>
        </tr>
    </TableHeader>
    <TableBody>
        @foreach (var file in _files)
        {
            <tr>
                <td class="px-6 py-3">@file</td>
                <td class="px-6 py-3 text-end">
                    <TwMenu Id="@($"file-menu-{file.Replace('.', '-')}")" Icon="Icon.Three_Dots_Vertical" IconOnly AriaLabel="@($"{file} options")">
                        <TwMenuItem Label="Download" StartIcon="Icon.Download" />
                        <TwMenuItem Label="Rename" StartIcon="Icon.Pencil" />
                    </TwMenu>
                </td>
            </tr>
        }
    </TableBody>
</TwTable>

The button tells screen readers that it opens a menu and whether the menu is open. The menu follows the ARIA menu pattern: one item has focus at a time, and the arrow keys move between them.

Key	What it does
`Tab`	Moves focus to the menu's button.
`Enter` or `Space` or `Arrow Down`	On the button: opens the menu with focus on its first item.
`Arrow Up`	On the button: opens the menu with focus on its last item.
`Arrow Down` or `Arrow Up`	In the menu: moves to the next or previous item, wrapping round at either end. Disabled items are skipped.
`Home` or `End`	In the menu: moves to the first or last item.
`A to Z`	In the menu: moves to the next item that starts with the typed letter.
`Enter` or `Space`	In the menu: chooses the focused item. An action closes the menu and returns focus to the button; a tick option flips and the menu stays open.
`Escape`	Closes the menu and returns focus to the button.
`Tab`	Closes the menu and moves focus on.

Theme configuration

Styling is controlled by TwBlazorTheme.Components (a TwMenuTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Root`	string
`Panel`	string
`Item`	string
`ItemDisabled`	string
`ItemIcon`	string
`CheckIcon`	string
`CheckIconHidden`	string
`Divider`	string
`GroupLabel`	string

Full reference: TwMenuTheme on the API docs.

TwMenu

Basic menu

Icon only button

Options that can be ticked

Groups and dividers

Inside a scrolling container

Keyboard navigation

Theme configuration