# Menu

Component: The display of a list of choices on a temporary surface (modal). The contents of this object are supplied from the Menu Container's (MC) primitives that separates the menu into three sections (left, primary, right).

[Styleguide Link](https://zpl.io/VkymMBg)

* Parent: [SelectList](https://able.bucca.com/core/components/form/selectlist), [App Bar](https://able.bucca.com/core/components/app-bar), More Icons
* Child: [MC - Leading](https://able.bucca.com/core/components/menu/mc-leading), [MC - Primary](https://able.bucca.com/core/components/menu/mc-primary), [MC - Trailing](https://able.bucca.com/core/components/menu/mc-trailing)

## Properties

### Type

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F3PLH5a41YgaFurORM0Lq%2FType.png?alt=media&#x26;token=6fef6966-c256-43fa-8d3b-fe9db0dbb7f0" alt=""><figcaption></figcaption></figure>

* **Text** - The default menu display method with different possible configurations.
* **Icon** - A menu option with a leading icon to provide additional context to the option.
* **Avatar** - When presenting a list of users we use a leading avatar in addition to the users handle or name.
* **Graphic** - Used when we'd like to display a "Thing" in a menu.
* **AdaptIcon** - For those situations where we'd show categories of something or a place (ie. map location types).

### Configurations

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FZGEkFIlJicMTJpx4l7uZ%2FConfiguration.png?alt=media&#x26;token=ded45378-0ef5-4638-8a87-6fdc178cfc94" alt=""><figcaption></figcaption></figure>

* **Base** - The default configuration for each of the Types of menu.
* **Choice** - The ability to visually display the currently selected options within the menu. This functions as either a singular choice, or multi-choice.
* **Trailing Icon** - Visually provides another level of context to a menu option. For example, the status of the option being locked or unlocked by visually showing an unlocked,locked icon. A trailing icon can also display a chevron to indicate that there's another level to the menu options.

### Elevation

**On** - The menus that display over screen content, like with the press of the "More" icon to reveal actions or with the SelectList - Dropdown we show a shadow.

**Off** - For those menus that are contained within a parent like a container for a Sheet or the ScrollView of a screen we will not use a shadow.

Note: Take notice of the minor rounding of the corners on menus with elevation.