Fan-Out Sub-Panel

ToolbarFanOutItem replaces a regular button with one that slides out a horizontal panel of additional tools when clicked. The panel closes when clicking the button again or anywhere outside it.

<Toolbar>
    <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
    <ToolbarFanOutItem icon='pi pi-th-large' tooltip='Shapes'>
        <ToolbarButton icon='pi pi-stop' title='Rectangle' />
        <ToolbarButton icon='pi pi-circle' title='Circle' />
        <ToolbarButton icon='pi pi-minus' title='Line' />
    </ToolbarFanOutItem>
</Toolbar>

By default the panel fans out to the right. Use fanOutDirection='left' when the toolbar is positioned on the right side of the screen:

<ToolbarFanOutItem icon='pi pi-th-large' tooltip='Shapes' fanOutDirection='left'>
    ...
</ToolbarFanOutItem>

You can also fan out vertically:

<ToolbarFanOutItem icon='pi pi-th-large' tooltip='Shapes' fanOutDirection='up'>
    ...
</ToolbarFanOutItem>

<ToolbarFanOutItem icon='pi pi-th-large' tooltip='Shapes' fanOutDirection='down'>
    ...
</ToolbarFanOutItem>

ReactNode Icons

Like ToolbarButton, the icon prop accepts a string | ReactNode. Pass any React element as the trigger icon:

import { FaShapes } from 'react-icons/fa6';

<ToolbarFanOutItem icon={<FaShapes />} tooltip='Shapes'>
    <ToolbarButton icon='pi pi-stop' title='Rectangle' />
    <ToolbarButton icon='pi pi-circle' title='Circle' />
</ToolbarFanOutItem>

See Icon for the shared Icon type and IconDisplay component.