Floating Menu
A floating action bar pinned to the bottom of the screen, e.g. for bulk actions on a selection.
Usage
import { FloatingMenu, FloatingMenuLabel } from "@tulip-systems/ui/floating-menu";<FloatingMenu open={selected.length > 0}>
<FloatingMenuLabel>{selected.length}</FloatingMenuLabel>
<Button variant="outline" size="sm">Verwijderen</Button>
</FloatingMenu>The menu is fixed to the bottom center of the viewport and hidden when open is false. Override the position through className (e.g. bottom-4 or static).
FloatingMenuClose renders an X button. While the menu is open, pressing escape clicks it, so the button and the shortcut always run the same handler. Escape is ignored when an open dialog or popover already handled it, or when focus is in an input, textarea, select or editable element.
Wrap actions in a FloatingMenuGroup and add a FloatingMenuEmpty right after it. The empty text only shows when the group renders nothing, e.g. when every action is hidden for the current selection:
<FloatingMenu>
<FloatingMenuLabel>{selected.length}</FloatingMenuLabel>
<FloatingMenuSeparator />
<FloatingMenuGroup>
{canArchive && <Button variant="outline" size="sm">Archiveren</Button>}
</FloatingMenuGroup>
<FloatingMenuEmpty>Geen acties voor deze selectie</FloatingMenuEmpty>
</FloatingMenu>For command-driven bulk actions, use FloatingCommandMenu from @tulip-systems/commands, which renders on top of this component.
API
| Component | Props | Description |
|---|---|---|
FloatingMenu | open?: boolean (default true) + div props | The floating toolbar container. |
FloatingMenuLabel | span props | Text inside the menu, e.g. a count. |
FloatingMenuSeparator | Separator props | Vertical divider between groups of items. |
FloatingMenuGroup | div props | Wraps the actions; hidden when empty. |
FloatingMenuEmpty | span props | Shown only when the group before is empty. |
FloatingMenuClose | Button props | X button, also triggered by escape. |