What doesn't fit

Since 0.1.0-alpha.13

Which controls move into the … menu first, icons before the menu, and wrapping instead.

Static server-side rendering: no circuit, no WebAssembly.

What moves first

Use Priority on an item (higher stays longer) and Overflow: Never for the main action, Always for what only the menu needs.

Preview Code

Preview

Code

Priority.razor

<Card Size="ControlSize.Sm" Width="Length.Full">
    <CardBody>
        <Toolbar Label="File">
            <ToolbarButton StartIcon="Lucide.Upload" Accent="Accent.Primary" Variant="ButtonVariant.Solid" Overflow="ToolbarOverflow.Never">Upload</ToolbarButton>
            <ToolbarButton StartIcon="Lucide.Share2" Priority="1">Share</ToolbarButton>
            <ToolbarButton StartIcon="Lucide.Pencil">Rename</ToolbarButton>
            <ToolbarButton StartIcon="Lucide.FolderInput">Move</ToolbarButton>
            <ToolbarSeparator />
            <ToolbarButton StartIcon="Lucide.Printer" Overflow="ToolbarOverflow.Always">Print</ToolbarButton>
            <ToolbarButton StartIcon="Lucide.FileClock" Overflow="ToolbarOverflow.Always">Version history</ToolbarButton>
        </Toolbar>
    </CardBody>
</Card>

With the same priority, controls move from the middle of the toolbar outward: the start from its end, then the end from its start, so the main action at the far end goes last. A ToolbarSeparator goes when there's nothing left on one side of it.

Use CollapseLabels to drop the text of buttons and menus with a StartIcon before anything moves into the … menu: they show only their icons, all at once, and the text stays for screen readers and as the tooltip. Narrow the window: once the icons alone don't fit, items move into the menu as before. One with Overflow="ToolbarOverflow.Never", such as Publish here, keeps its text.

Preview Code

Preview

Code

CollapseLabels.razor

<Card Size="ControlSize.Sm" Width="Length.Full">
    <CardBody>
        <Toolbar Label="Insert" CollapseLabels>
            <ToolbarButton StartIcon="Lucide.Heading">Heading</ToolbarButton>
            <ToolbarButton StartIcon="Lucide.List">List</ToolbarButton>
            <ToolbarButton StartIcon="Lucide.Quote">Quote</ToolbarButton>
            <ToolbarMenu Label="Media" StartIcon="Lucide.Image">
                <MenuItem Icon="Lucide.Image">Image</MenuItem>
                <MenuItem Icon="Lucide.Video">Video</MenuItem>
            </ToolbarMenu>
            <ToolbarButton StartIcon="Lucide.Send" Accent="Accent.Primary" Variant="ButtonVariant.Solid" Position="ToolbarPosition.End" Overflow="ToolbarOverflow.Never">Publish</ToolbarButton>
        </Toolbar>
    </CardBody>
</Card>

Wrapping instead

Use Wrap for a toolbar where everything must show: it wraps onto more rows, with no menu.

Preview Code

Preview

Code

Wrap.razor

<Card Size="ControlSize.Sm" Width="Length.Full">
    <CardBody>
        <Toolbar Label="Insert" Wrap>
            <ToolbarButton StartIcon="Lucide.Heading">Heading</ToolbarButton>
            <ToolbarButton StartIcon="Lucide.List">List</ToolbarButton>
            <ToolbarButton StartIcon="Lucide.Quote">Quote</ToolbarButton>
            <ToolbarButton StartIcon="Lucide.Code">Code</ToolbarButton>
            <ToolbarButton StartIcon="Lucide.Table">Table</ToolbarButton>
            <ToolbarButton StartIcon="Lucide.Image">Image</ToolbarButton>
        </Toolbar>
    </CardBody>
</Card>

What doesn't fit

What moves first

Icons before the menu

Wrapping instead