> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-components/simple-components/button-menu/code.md).

# Code

## Props - Single Selection

<table><thead><tr><th width="212">Props</th><th width="385.66666666666663">Data Type</th><th>Required</th></tr></thead><tbody><tr><td>className</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>children</td><td>-HTML tags<br>-Custom Components<br><em>(MenuOption, MenuHeader and MenuDivider)</em></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>menuType</td><td>'Menu' | 'MenuBox'</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>btnText</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>btnType</td><td>'Base' | 'Primary' | 'Secondary' | 'Ghost' | 'Danger' | 'DangerAlt'</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>btnSize</td><td>'Default' | 'Large' | 'Small'</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>btnIcon</td><td>Telicon Icons</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>btnIconPosition</td><td>'Left' | 'Right'</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>carets</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>disabled</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>search</td><td>boolean<br>(Only Available with menuType 'Menu')</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>autoposition</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr></tbody></table>

### Description

This component is the mix between the `Button` and the `Menu/MenuBox` components. The reason why it was created as a different component is because this combinations is a very common implementation on Comm.land layouts that requires a considerable extra job for developers to make it work as it is supposed to. Besides that, by doing this a SDS component, it is easier to add the extra features like `autoposition` one, saving a lot of extra work to developers in the case they wanted to implement it manually on the component.

### menuType

The `ButtonMenu` component offers the two available menu types in SDS Components. The Menu component has been done to work in coordination with other components like: `MenuOption` `MenuHeader` and `MenuDivider`. Besides that, the Menu option has the Search filter already incorporated.

`MenuBox`, on the other hand, offers an empty box as a `Menu` component that can accept custom components or HTML elements without any kind of limitations, in contrast with the standard `Menu` component. This might be very useful when developers are creating custom menus that don't follow the standard template.

### autoposition

This feature allows developers to not worry about the correct location of the `Menu` or `MenuBox` component on the screen, because this will relocate it automatically, placing it on the top, bottom, right or left; it all depends on the available space.

### carets

This prop will add a carets-sortable icon on the right side of the Button component. The usage of the caret prop might be very useful as a visual indicator that this is not a standard `Button`, instead, it is a `Button` that works as a trigger to show a `Menu/MenuBox` component, almost like a dropdown.

### Example

```tsx
const clickEvent = (menuOptionData)=>{
  console.log(menuOptionData);
}

return (
    <ButtonMenu
      btnIcon="setting-cog"
      btnIconPosition="Left"
      btnSize="Default"
      btnText="Button Menu"
      carets
      className="ButtonMenuExample"
      menuType="Menu"
    >
      <MenuOption value="Element 1" onClick={clickEvent}>
        Element 1
      </MenuOption>
      <MenuOption value="Element 2" onClick={clickEvent}>
        Element 2
      </MenuOption>
      <MenuOption value="Element 3" onClick={clickEvent}>
        Element 3
      </MenuOption>
    </ButtonMenu>
)
```

## Components Dependency

* [Button](/sds/sds-components/simple-components/button.md)
* [Menu](/sds/sds-components/simple-components/menu.md)
* [MenuBox](/sds/sds-components/simple-components/menu-box.md)

## Live Demo <a href="#live-demo" id="live-demo"></a>

For detailed code usage documentation, see the Storybooks for each framework below.​

### React

{% embed url="<https://sipster-react-component-storybook.netlify.app/?path=/story/general-components-button-menu--base-button-menu>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://2600hz.gitbook.io/sds/sds-components/simple-components/button-menu/code.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.