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>
}