@squiz/xaccel-overflow-menu

Overflow Menu

Description

The Overflow Menu component hides items that don't fit in the available space and shows them in a dropdown menu. It automatically adjusts when the window size changes or when items are added or removed. The Overflow Menu contains an option to add a custom button triggering the menu.

Components properties

Property Name	Property description	Property Type	IsRequired
addOwnButton	Whether to add a custom button to trigger the overflow menu.	bool
ownButtonProps	Properties for the custom overflow button if addOwnButton is true.	object
children	The items to display inside the overflow menu.	ReactNode
className	Overwrite ClassName	classNameOverride
...divProps	Any other properties a div element supports.	-

For more information about className please visit packages/utility/functions/src/generateClasses.js

Props Example:

<OverflowMenu
    addOwnButton={true}
    ownButtonProps={{ label: 'More', showIconOnly: true }}
    className="customClass"
>
    <li>Item 1</li>
    <li>Item 2</li>
</OverflowMenu>

Usage

Install the package by running: npm i @squiz/xaccel-overflow-menu

import { OverflowContainer, OverflowMenu, OverflowMenuButton} from '@squiz/xaccel-overflow-menu';

function SomeReactComponent() {
    <OverflowContainer>
        <OverflowMenu>
            <li>Item 1</li>
            <li>Item 2</li>
        </OverflowMenu>
        <OverflowMenuButton label="Click here to open" showIconOnly={false} className="MyButton" />
    </OverflowContainer>
}