# Menu list

The UI component **Menu List** allows you to easily set up a vertical 1-level menu. You may add List Items (e.g. "My Orders"), Subheaders and Dividers to this List. List Items are clickable, and may perform navigational actions `on click`.

{% hint style="info" %}
You may see an example setup of a Menu List in the left menu of the UI Components App in our [Showroom](https://showroom.appfarm.app/ui-components)! You try the Menu List, as well as access the setup in Appfarm Create. If you do not have access, you may register [here](https://showroom.appfarm.app/sign-up).
{% endhint %}

## Settings

Here are some of the properties in Appfarm Create which are custom for a **Menu List:**

### **List Items**

These are the entries in the Menu List. 3 different **types** exist:

* List Item: A clickable item with a title, such as "My Orders". 
* Subheader: A static text, serving as a title or grouping of subsequent list items. 
* Divider: A horizontal line, serving as a divider between logical distinct sections of the menu.

### Visual Type

Only applicable for List Items. Here you can choose what will your list items be sorted by visually. The options are:

* **Icon:** *A static icon* - will be used as the fallback if *Icon Value* is defined but does not provide a value; *Icon Value - a* dynamic icon defined by an *ENUM* value. Will fallback to *Icon* (if defined), if the *ENUM* value does not provide an icon.
* **Avatar:** An avatar at the beginning of each list item/row. It enables data binding to an Image property, as well as setting up an Avatar Background Color.

### Primary Text

Only applicable for List Items. This is the title of the menu item. 

### Secondary Text

Only applicable for List Items. This is an optional subtitle displayed below the Primary Text. Usually a category or a description, with less importance and not in focus.

### Action Type

Only applicable for List Items. If we want an implemented functionality of one of the already existing components. The options are:

* **Action Button:** A button selecting and highlighting the list item when clicked;
* **Checkbox:** A built-in *Checkbox* UI component;
* **Switch:** A built-in *Switch* UI component*;*
* **Toggle Button:** An Icon Button that toggles a value of a property (most likely a Boolean or an ENUM).

### Highlighted

Only applicable for List Items. The item will be highlighted (the menu item will be visually marked as active/selected) when the condition defined is `true`.

### **Dense**

Only applicable for List Items, or for the whole Menu List. Compact vertical padding will be used for the list item. You may also apply this setting to the whole Menu List. 

### Insert Text

The text will be indented. 

### Insert Divider

Only applicable for List Items. The divider line will be shortened and displayed in the length of the list item text.

### **Enable Divider**

Only applicable for List Items. Render a divider line between list items.

### **On Click**

Select an action to run when the List Item is clicked. For example, an action that navigates to a specific view.

### **Disable Padding**

Vertical padding will be removed from the whole Menu List.

### **Disable Gutters**

The left and right padding is removed from the whole Menu List


---

# Agent Instructions: 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:

```
GET https://docs.appfarm.io/library/ui-components/menu-list.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.