Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

button-menu

v1.9.0arrow_drop_down
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
29
VISIBILITY
Public
PUBLISHED
2 weeks ago
SIZE
24 KB
A Button Menu offers a list of actions or functions that a user can access.
1 contributor
Use button-menu in your project ?
Copied
npm i @bit/nexxtway.react-rainbow.button-menu
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right
button menu base
import React from 'react';
import { ButtonGroup, ButtonMenu, MenuItem } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCog } from '@fortawesome/free-solid-svg-icons';

<div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
    <GlobalHeader className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large">
        <ButtonGroup>
            <ButtonMenu
                menuAlignment="right"
                menuSize="x-small"
                buttonVariant="base"
                icon={<FontAwesomeIcon icon={faCog} />}
            >
                <MenuItem label="Menu Item One" />
                <MenuItem label="Menu Item Two" />
                <MenuItem label="Menu Item Three" />
                <MenuItem label="Menu Item Four" />
            </ButtonMenu>
        </ButtonGroup>
    </GlobalHeader>
</div>
button menu with divider
import React from 'react';
import {
    ButtonGroup,
    ButtonMenu,
    MenuItem,
    ButtonIcon,
    MenuDivider,
} from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
    faAngleDown,
    faCog,
    faPaste,
    faPlus,
    faEllipsisV,
} from '@fortawesome/free-solid-svg-icons';

<div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
    <GlobalHeader
        src="images/user/user3.jpg"
        className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large"
    >
        <ButtonGroup>
            <ButtonIcon icon={<FontAwesomeIcon icon={faPlus} />} variant="border-filled" disabled />
            <ButtonIcon
                icon={<FontAwesomeIcon icon={faPaste} />}
                variant="border-filled"
                disabled
            />
            <ButtonMenu
                menuAlignment="right"
                menuSize="x-small"
                icon={<FontAwesomeIcon icon={faCog} />}
            >
                <MenuItem label="Menu Item One" />
                <MenuItem label="Menu Item Two" />
                <MenuItem label="Menu Item Three" />

                <MenuDivider variant="space" />
                <MenuItem label="Menu Item Four" />
            </ButtonMenu>
        </ButtonGroup>
    </GlobalHeader>
</div>
button menu with subheaders
import React from 'react';
import { ButtonGroup, ButtonIcon, ButtonMenu, MenuItem } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faEdit, faEllipsisV } from '@fortawesome/free-solid-svg-icons';

<div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
    <GlobalHeader
        src="images/user/user2.jpg"
        className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large"
    >
        <ButtonGroup>
            <ButtonIcon icon={<FontAwesomeIcon icon={faPlus} />} variant="border-filled" disabled />
            <ButtonIcon icon={<FontAwesomeIcon icon={faEdit} />} variant="border-filled" disabled />
            <ButtonMenu
                id="button-menu"
                menuAlignment="right"
                menuSize="x-small"
                icon={<FontAwesomeIcon icon={faEllipsisV} />}
            >
                <MenuItem label="Menu header" variant="header" />
                <MenuItem label="Menu Item One" />
                <MenuItem label="Menu Item Two" />
                <MenuItem label="Menu Item Three" />
                <MenuItem label="Menu header" variant="header" />
                <MenuItem label="Menu Item One" />
                <MenuItem label="Menu Item Two" />
            </ButtonMenu>
        </ButtonGroup>
    </GlobalHeader>
</div>
button menu with icons
import React from 'react';
import { ButtonGroup, ButtonIcon, ButtonMenu, MenuItem } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
    faAlignCenter,
    faAlignLeft,
    faAlignRight,
    faAnchor,
    faPlus,
    faFutbol,
    faBullhorn,
    faStore,
    faEllipsisV,
} from '@fortawesome/free-solid-svg-icons';

<div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
    <GlobalHeader
        className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large"
        src="images/user/user3.jpg"
    >
        <ButtonGroup className="rainbow-m-right_medium">
            <ButtonIcon icon={<FontAwesomeIcon icon={faPlus} />} variant="border-filled" disabled />
            <ButtonMenu
                id="button-menu-1"
                menuSize="x-small"
                menuAlignment="right"
                icon={<FontAwesomeIcon icon={faStore} />}
            >
                <MenuItem
                    label="Right Icon"
                    icon={<FontAwesomeIcon icon={faFutbol} />}
                    iconPosition="right"
                />

                <MenuItem
                    label="Right Icon"
                    icon={<FontAwesomeIcon icon={faAnchor} />}
                    iconPosition="right"
                />

                <MenuItem
                    label="Right Icon"
                    icon={<FontAwesomeIcon icon={faBullhorn} />}
                    iconPosition="right"
                />
            </ButtonMenu>
            <ButtonMenu
                id="button-menu-2"
                menuAlignment="right"
                menuSize="x-small"
                icon={<FontAwesomeIcon icon={faEllipsisV} />}
            >
                <MenuItem
                    label="Left Icon"
                    icon={<FontAwesomeIcon icon={faAlignCenter} />}
                    iconPosition="left"
                />

                <MenuItem
                    label="Left Icon"
                    icon={<FontAwesomeIcon icon={faAlignLeft} />}
                    iconPosition="left"
                />

                <MenuItem
                    label="Left Icon"
                    icon={<FontAwesomeIcon icon={faAlignRight} />}
                    iconPosition="left"
                />
            </ButtonMenu>
        </ButtonGroup>
    </GlobalHeader>
</div>
button menu position variants
import React from 'react';
import { ButtonGroup, ButtonIcon, ButtonMenu, MenuItem } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCog, faShareAlt, faPlus, faBell, faSlidersH } from '@fortawesome/free-solid-svg-icons';

<div>
    <GlobalHeader
        className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large"
        src="images/user/user2.jpg"
    >
        <ButtonGroup className="rainbow-m-right_medium">
            <ButtonMenu
                menuAlignment="left"
                menuSize="x-small"
                icon={<FontAwesomeIcon icon={faCog} />}
            >
                <MenuItem label="Menu Positioned Left" />
                <MenuItem label="Menu Positioned Left" />
                <MenuItem label="Menu Positioned Left" />
            </ButtonMenu>
            <ButtonIcon
                icon={<FontAwesomeIcon icon={faSlidersH} />}
                variant="border-filled"
                disabled
            />
            <ButtonIcon
                icon={<FontAwesomeIcon icon={faShareAlt} />}
                variant="border-filled"
                disabled
            />
        </ButtonGroup>
        <ButtonMenu
            menuAlignment="right"
            menuSize="x-small"
            buttonVariant="base"
            icon={<FontAwesomeIcon icon={faBell} />}
        >
            <MenuItem label="Menu Positioned Right" />
            <MenuItem label="Menu Positioned Right" />
            <MenuItem label="Menu Positioned Right" />
        </ButtonMenu>
    </GlobalHeader>
    <div className="rainbow-m-horizontal_large rainbow-p-top_xx-large rainbow-m-bottom_large rainbow-grid   rainbow-grid_align-end">
        <ButtonMenu
            menuAlignment="bottom"
            buttonVariant="brand"
            menuSize="x-small"
            icon={<FontAwesomeIcon icon={faPlus} />}
        >
            <MenuItem label="Menu Positioned Bottom" />
            <MenuItem label="Menu Positioned Bottom" />
            <MenuItem label="Menu Positioned Bottom" />
        </ButtonMenu>
    </div>
</div>
button menu width variants
import React from 'react';
import { ButtonGroup, ButtonIcon, ButtonMenu, MenuItem } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome');
import {
    faCog,
    faPencilAlt,
    faStore,
    faPlus,
    faBell,
    faEllipsisV,
} from '@fortawesome/free-solid-svg-icons';

<div>
    <GlobalHeader className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
        <ButtonGroup className="rainbow-m-right_medium">
            <ButtonIcon variant="border-filled" disabled icon={<FontAwesomeIcon icon={faCog} />} />
            <ButtonMenu
                menuSize="xx-small"
                menuAlignment="right"
                icon={<FontAwesomeIcon icon={faEllipsisV} />}
            >
                <MenuItem label="xx-small" />
                <MenuItem label="xx-small" />
                <MenuItem label="xx-small" />
            </ButtonMenu>
        </ButtonGroup>
        <div className="rainbow-m-right_medium">
            <ButtonMenu
                menuAlignment="right"
                menuSize="x-small"
                icon={<FontAwesomeIcon icon={faStore} />}
            >
                <MenuItem label="Menu x-small" />
                <MenuItem label="Menu x-small" />
                <MenuItem label="Menu x-small" />
            </ButtonMenu>
        </div>
        <ButtonMenu menuAlignment="right" menuSize="small" icon={<FontAwesomeIcon icon={faBell} />}>
            <MenuItem label="Menu small" />
            <MenuItem label="Menu small" />
            <MenuItem label="Menu small" />
        </ButtonMenu>
    </GlobalHeader>
    <div className="rainbow-m-horizontal_large rainbow-p-top_xx-large rainbow-m-bottom_large rainbow-flex">
        <ButtonGroup className="rainbow-m-right_medium">
            <ButtonIcon variant="border-filled" disabled icon={<FontAwesomeIcon icon={faCog} />} />
            <ButtonMenu
                menuAlignment="left"
                menuSize="large"
                icon={<FontAwesomeIcon icon={faPlus} />}
            >
                <MenuItem label="Menu large" />
                <MenuItem label="Menu large" />
                <MenuItem label="Menu large" />
            </ButtonMenu>
        </ButtonGroup>
        <ButtonMenu
            menuSize="medium"
            menuAlignment="left"
            icon={<FontAwesomeIcon icon={faPencilAlt} />}
        >
            <MenuItem label="Menu medium" />
            <MenuItem label="Menu medium" />
            <MenuItem label="Menu medium" />
        </ButtonMenu>
    </div>
</div>
button menu with disabled items
import React from 'react';
import { ButtonGroup, ButtonMenu, MenuItem } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCog } from '@fortawesome/free-solid-svg-icons';

<div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
    <GlobalHeader className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large">
        <ButtonGroup>
            <ButtonMenu
                id="button-menu-disabled-items"
                menuAlignment="right"
                menuSize="x-small"
                buttonVariant="base"
                icon={<FontAwesomeIcon icon={faCog} />}
            >
                <MenuItem label="Menu Item One" />
                <MenuItem disabled label="Menu Item Two" />
                <MenuItem label="Menu Item Three" />
                <MenuItem label="Menu Item Four" />
                <MenuItem disabled label="Menu Item Five" />
            </ButtonMenu>
        </ButtonGroup>
    </GlobalHeader>
</div>
button menu loading
import React from 'react';
import { ButtonGroup, ButtonMenu } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBell } from '@fortawesome/free-solid-svg-icons';

<div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
    <GlobalHeader
        className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large"
        src="images/user/user3.jpg"
    >
        <ButtonGroup>
            <ButtonMenu
                menuAlignment="right"
                menuSize="x-small"
                label="Custom Apps"
                isLoading
                icon={<FontAwesomeIcon icon={faBell} />}
            />
        </ButtonGroup>
    </GlobalHeader>
</div>
Properties
NameTypeDefault valueDescription
icon
nodenull

The icon to show if it is passed. It must be a svg icon or a font icon. It is a required value.

children
node[] | objectnull

The content of the ButtonMenu. Used to render the menuItem elements when the ButtonMenu is open.

buttonVariant
'base' | 'brand' | 'success' | 'border' | 'border-filled' | 'border-inverse' | 'inverse''border-filled'

The variant changes the look of the button. Accepted variants include base, brand, success, border, border-filled, bare-inverse, and inverse. This value defaults to border-filled.

buttonSize
'xx-small' | 'x-small' | 'small' | 'medium' | 'large''medium'

The size of the button. Options include xx-small, x-small, medium, or large. This value defaults to medium.

buttonShaded
boolfalse

Specify true when the button has a shadow around it. This value defaults to false. Only neutral, brand, destructive and success variant can be shaded.

menuSize
'xx-small' | 'x-small' | 'small' | 'medium' | 'large''xx-small'

The size of the menu. Options include xx-small, x-small, medium, or large. This value defaults to small.

menuAlignment
'left' | 'right' | 'bottom' | 'center' | 'bottom-right' | 'bottom-left''left'

Determines the alignment of the menu relative to the button. Available options are: left, center, right, bottom, bottom-left, bottom-right. This value defaults to left.

disabled
boolfalse

If true, the menu is disabled. Disabling the menu prevents users from opening it. This value defaults to false.

isLoading
boolfalse

If is set to true, then is showed a loading symbol.

title
stringundefined

Displays tooltip text when the mouse moves over the element.

assistiveText
stringundefined

A description for assistive sreen readers.

tabIndex
number | stringundefined

Specifies the tab order of an element (when the tab button is used for navigating).

onClick
function() => {}

The action triggered when the element is clicked.

onFocus
function() => {}

The action triggered when the element receives focus.

onBlur
function() => {}

The action triggered when the element releases focus.

className
stringundefined

A CSS class for the outer element, in addition to the component’s base classes.

style
objectundefined

An object with custom style applied to the outer element.

id
stringundefined

The id of the outer element.