# 분할 버튼(Split Buttons)으로서의 메뉴(Menu)

## Content

\_\_Split Buttons\_\_를 통해 사용자가 기본 버튼을 클릭하여 값을 선택하거나, 드롭다운 목록에 표시된 상호 배타적인 값 목록에서 선택할 수 있습니다.

Wijmo **메뉴** 컨트롤을 분할 버튼으로 사용하려면 **isButton** 속성을 true로 설정하면 됩니다. 이를 통해, 메뉴 헤더를 클릭하면 드롭다운 목록이 표시되지 않고 **itemClicked** 이벤트가 발생합니다.

예시: **Menu** 컨트롤이 SplitButton으로 구현되었습니다:
![menu-split-buttons_3](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/55e359f3-7c23-4ca9-ac69-930959e94e19/menu-split-buttons_3.3b0b1c.gif)

##### HTML

```html
  <div id="theSplitButton"></div>
```

##### Javascript

```javascript
import * as input from '@mescius/wijmo.input';

function init() {
    // create the split-button menu
    var theSplitButton = new input.Menu('#theSplitButton', {
        // item clicked fires when you select an option or click the header
        isButton: true,
        itemClicked: (sender) => {
            alert('Running ' + sender.selectedValue);
        },
        
        // update header to show current selection
        selectedIndexChanged: (sender) => {
            if (sender.selectedIndex > -1) {
                sender.header = `Run: <b>${sender.selectedItem.header}</b>`;
            }
        },
        
        // populate menu after hooking up the selectedIndexChanged event
        displayMemberPath: 'header',
        selectedValuePath: 'value',
        itemsSource: [
            { header: 'Internet Explorer', value: 'IE' },
            { header: 'Chrome', value: 'CHR' },
            { header: 'Firefox', value: 'FFX' },
            { header: 'Safari', value: 'IOS' },
            { header: 'Opera', value: 'OPR' }
        ],
        selectedValue: 'FFX'
    });
}
```