Skip to content

Latest commit

 

History

History

ebay-fake-menu-button

EbayFakeMenuButton

Demo

Storybook

Install

yarn add @ebay/ui-core-react

Usage

import {
    EbayFakeMenuButton,
    EbayFakeMenuButtonItem as Item,
    EbayFakeMenuButtonSeparator as Separator,
    EbayFakeMenuButtonLabel as Label
} from '@ebay/ui-core-react/ebay-fake-menu-button';
import '@ebay/skin/menu-button';
<EbayFakeMenuButton text="Menu">
    <Item href="https://ebay.com">Home</Item>
    <Item href="https://ebay.com/my">My eBay</Item>
    <Item href="https://ebay.com/categories">Categories</Item>
    <Separator />
    <Item>Log in</Item>
</EbayFakeMenuButton>

// With a complex label

<EbayFakeMenuButton a11y-text="Navigation menu">
    <Label><img src="menu-logo.svg" /></Label>
    <Item href="https://ebay.com">Home</Item>
    <Item href="https://ebay.com/my" current>My eBay</Item>
</EbayFakeMenuButton>

EbayFakeMenuButton Attributes

Name Type Required Description
text String No Button label text
a11y-text String Only without a text label A11y text for the button
noToggleIcon Boolean No whether to hide the chevron toggle icon
expanded Boolean No whether content is expanded
type String No Not yet implemented
variant String No will change the button style: overflow, form or button
priority String No button priority, only used when variant is button
reverse Boolean No expand menu flyout to the left
fixWidth Boolean No Constrain items container width to button width
borderless Boolean No Whether button has borders
size String No button size: large or regular (default)

EbayFakeMenuButtonItem Attributes

Name Type Required Description
href String No Creates a menu-item with a link
current Boolean No Whether or not the href is the current href of the page
type String No Type of a (non-link) menu-item, default: button
value (radio or checkbox) String No Not yet implemented
checked (radio or checkbox) Boolean No Not yet implemented
badge-number Number No Not yet implemented
badge-aria-label String Yes (if badge-number provided) Not yet implemented
onClick Function No For a non-link menu item, with param { originalEvent }

Callbacks

Name Required Description Arguments
onKeyDown No Triggered on key down (KeyboardEvent)
onMouseDown No Triggered on mouse down on menu item (MouseEvent, { index: number })
onCollapse No Triggered on menu collapse ()
onExpand No Triggered on menu expand ()
onSelect No Not yet implemented (ChangeEvent, { index: number })