@squiz/xaccel-overflow-menu v1.15.0-beta.1

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

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