Top
DropdownButton API - API
DropdownButton API
Props (15)
Callback Props (4)
Styling Props (2)
String|String[]
default: undefined
Determines the position of menu relative to button region.
Menu has alignTo set to button region.
For more information on this prop see alignPositions on Menu.
It has the following default:'tl-bl', 'tr-br', 'bl-tl', 'br-tr', 'tl-tr', 'bl-br', 'tr-tl', 'tr-br'
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

const corners = [
  {id: 'tl', label: 'tl'},
  {id: 'tr', label: 'tr'},
  {id: 'br', label: 'br'},
  {id: 'bl', label: 'bl'}
]

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      buttonPosition: 'tl',
      menuPosition: 'br'
    }
  }
  render() {
    return <div style={{marginLeft: 30, display: 'inline-flex'}}>
        <div style={{marginBottom: 20}}>
          Select menu corner
          <ComboBox
            autoBlur
            value={this.state.buttonPosition}
            dataSource={ corners }
            onChange={(position) => this.setState({buttonPosition: position})}
            style={{width: 145}}
          />
          Select button corner
          <ComboBox
            autoBlur
            value={this.state.menuPosition}
            dataSource={ corners }
            onChange={(position) => this.setState({menuPosition: position})}
            style={{width: 145}}
          />
        </div>
        <div style={{ marginTop: 20, marginLeft: 30 }}>
          <DropdownButton alignPositions={[this.state.buttonPosition + '-' + this.state.menuPosition]} items={items}>
            Menu
          </DropdownButton>
        </div>
  </div>
  }
}
export default () => <App/>
React.Node|Fn(expanded)
default: undefined
Customize arrow icon.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

const expand = <svg fill="#00ff00" height="24" viewBox="0 0 24 24" width="24">
  <path d="M7 10l5 5 5-5z"/>
  <path d="M0 0h24v24H0z" fill="none"/>
</svg>

const collapse = <svg fill="#00ff00" height="24" viewBox="0 0 24 24" width="24">
  <path d="M7 14l5-5 5 5z"/>
  <path d="M0 0h24v24H0z" fill="none"/>
</svg>

function arrow(expanded) {
  return <div style={{ display: 'flex', marginLeft: 5, padding: 2 }}>
    {expanded ? collapse : expand}
  </div>
}

export default () => <div>
  <DropdownButton arrow={arrow} items={items}>Menu</DropdownButton>
</div>
left|right
default: undefined
Specifies the position of the arrow relative to button text.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { arrowPosition: 'right' }
  }
  render() {
    return <div>
      <ComboBox
        autoBlur
        value={this.state.arrowPosition}
        dataSource={ [{id: 'left', label: 'left'}, {id: 'right', label: 'right'}] }
        onChange={arrowPosition => this.setState({arrowPosition})}
        style={{width: 100, marginBottom: 75}}
      />
      <DropdownButton arrowPosition={this.state.arrowPosition} items={items}>Menu</DropdownButton>
    </div>
  }
}
export default () => <App />
Objects
default: undefined
Props passed to Button component.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

const overStyle = {
  background: '#07a'
}

export default () => <DropdownButton items={items} buttonProps={{ overStyle }}>
  Menu
</DropdownButton>
Bool
default: undefined
Whether the dropdown button is initially expanded.
For controlled behaviour, see expanded.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

export default () => <DropdownButton
  hideMenuOnClick
  defaultExpanded={true}
  items={items}
>
  Menu
</DropdownButton>
Bool
default: undefined
Whether the component is disabled.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { disabled: false }
  }
  render() {
    return <div>
      <CheckBox
        checked={this.state.disabled}
        onChange={disabled => this.setState({disabled})}
      >
        disabled
      </CheckBox>
      <div style={{marginTop: 10}}>
        <DropdownButton disabled={this.state.disabled} items={items}>Menu</DropdownButton>
      </div>
    </div>
  }
}
export default () => <App />
Bool
default: undefined
Whether the dropdown button is expanded. To react to expand change see onExpandedChange.
For uncontrolled behaviour, see defaultExpanded.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { expanded: false }
  }
  render() {
    return <div>
      <CheckBox
        checked={this.state.expanded}
        onChange={expanded => this.setState({expanded})}
      >
        expanded
      </CheckBox>
      <div style={{marginTop: 10}}>
        <DropdownButton expanded={this.state.expanded} items={items}>Menu</DropdownButton>
      </div>
    </div>
  }
}
export default () => <App />
String|String[]
default: undefined
Whether to hide menu when button is clicked.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hideMenuOnClick: false }
  }
  render() {
    return <div>
      <CheckBox
        checked={this.state.hideMenuOnClick}
        onChange={hideMenuOnClick => this.setState({hideMenuOnClick})}
      >
        hideMenuOnClick
      </CheckBox>
      <div style={{marginTop: 10}}>
        <DropdownButton hideMenuOnClick={this.state.hideMenuOnClick} items={items}>Menu</DropdownButton>
      </div>
    </div>
  }
}
export default () => <App />
String|String[]
default: undefined
Whether to close submenu on click outside.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hideMenuOnClickOutside: false }
  }
  render() {
    return <div>
      <CheckBox
        checked={this.state.hideMenuOnClickOutside}
        onChange={hideMenuOnClickOutside => this.setState({hideMenuOnClickOutside})}
      >
        hideMenuOnClickOutside
      </CheckBox>
      <div style={{marginTop: 10}}>
        <DropdownButton hideMenuOnClickOutside={this.state.hideMenuOnClickOutside} items={items}>Menu</DropdownButton>
      </div>
    </div>
  }
}
export default () => <App />
Array
default: undefined
Describes items rendered inside dropdown menu.
For more details see items on menu api.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

export default () => <DropdownButton items={items}>
  Menu
</DropdownButton>
React.Component
default: "Menu"
Specify a custom menu component to be rendered insted of Menu.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import Menu from '@zippytech/react-toolkit/Menu'
import '@zippytech/react-toolkit/Menu/index.css'
import Icon from './icons'

const MenuComp = (props) => <Menu {...props} itemOverStyle={{ color: 'aqua' }} />

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

export default () => <DropdownButton menu={MenuComp} items={items}>Menu</DropdownButton>
Objects
default: undefined
Props passed to Menu component.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

const itemOverStyle = {
  color: 'aqua'
}

export default () => <DropdownButton items={items} menuProps={{ itemOverStyle }}>
  Menu
</DropdownButton>
Fn(buttonProps): React.Node
default: undefined
Custom render for Button component.
Return new React.Node or return undefined and mutate buttonProps.
If it returns undefined, the mutated domProps are applied on the default implementation.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

function renderButton(domProps) {
  domProps.overStyle = {
    background: '#07a'
  }
}

export default () => <DropdownButton items={items} renderButton={renderButton}>
  Menu
</DropdownButton>
Fn(menuProps): React.Node
default: undefined
Custom render for Menu component.
Return new React.Node or return undefined and mutate menuProps.
If it returns undefined, the mutated domProps are applied on the default implementation.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import Icon from './icons'

const renderMenu = (menuProps) => {
  menuProps.itemOverStyle = { color: 'aqua' }
}

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

export default () => <DropdownButton renderMenu={renderMenu} items={items}>
  Menu
</DropdownButton>
Bool
default: false
Whether to use right-to-left.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { rtl: false }
  }
  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <CheckBox
          checked={this.state.rtl }
          onChange={(rtl) => {
            this.setState({
              rtl
            })
          }}
        >
          rtl
        </CheckBox>
      </div>
      <DropdownButton rtl={this.state.rtl} items={items}>Menu</DropdownButton>
    </div>
  }
}

export default () => <App />
For more callback props see use buttonProps or menuProps.
Fn(event)
default: undefined
Called when button is clicked.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];


export default () => <div>
  <DropdownButton
    items={items}
    onClick={() => zippy.notification.first.addNotification({ content: 'onClick called' })}
  >
    Menu
  </DropdownButton>
  <NotificationBoard id="first" />
</div>
  
Fn()
default: undefined
Called when menu should collapse.
This happens when:
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

export default () => <div>
  <DropdownButton
    hideMenuOnClick
    hideMenuOnClickOutside
    items={items}
    onDismiss={() => zippy.notification.first.addNotification({ content: 'onDismiss called' })}
  >
    Menu
  </DropdownButton>
  <NotificationBoard id="first" />
</div>
Fn(expanded)
default: undefined
Called when expanded changes.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

class App extends React.Component {
  render() {
    return <div>
      <DropdownButton
        items={items}
        onExpandedChange={() => zippy.notification.first.addNotification({ content: 'onExpandedChange called' })}
      >
        Menu
      </DropdownButton>
      <NotificationBoard id="first" />
    </div>
  }
}

export default () => <App />
Fn(event, itemProps)
default: undefined
Called when a menu item, at any nesting level has been clicked.
For more fine controll over menu see menuProps, renderMenu or menu.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

export default () => <div>
  <DropdownButton
    items={items}
    onMenuClick={() => zippy.notification.first.addNotification({ content: 'onMenuClick called' })}
  >
    Menu
  </DropdownButton>
  <NotificationBoard id="first" />
</div>
  
There is only a style prop that is added on wrapper div. To style Button or Menu components, use menuprops and buttonProps.
String
default: undefined
The className to be applied to dropdown button.
This prop is passed to Button and Menu.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import Icon from './icons'

import './index.global.css'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

export default () => <div>
  <div>
    <DropdownButton
      className="dropdown-class"
      items={items}
    >
      Menu
    </DropdownButton>
  </div>
</div>
object
default: undefined
Inline style added wrapper around button and menu.
import React from 'react'
import DropdownButton from '@zippytech/react-toolkit/DropdownButton'
import '@zippytech/react-toolkit/DropdownButton/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

export default () => <DropdownButton
  items={items}
  style={{ background: '#1976D2' }}
>
  Menu
</DropdownButton>