Component > Combo menu

Combo Menu



  1. Container

Loads all other components

  1. Filter Chips

Provide options for the user to choose from. Here the chips can be operators, or items from a category.

  1. Textual items

Clickable items, can be category names (e.g. Regions) or “Search for ‘xxx’…”

  1. Divider

To separate content into clear groups

  1. Expanding menu indicator

To indicate more and how many items to be loaded within this category



Visual Option 1 - for long search bar

The menu will be opened by the right bound of the last chip in the search bar, until the menu’s right bound reaches the end of the search bar. It will expand downwards with a certain height limit.

Visual Option 2 - for limited space

To fit limited space, the menu will match the width of its search bar, and be opened right below the search bar. It will expand downwards with a certain height limit.


The menu can be cancelled by clicking the overlay or pressing the Esc key.

Selecting an item

Upon selecting an item, the menu will stay expanded and update its content accordingly.

The selected item will be displayed inside the search bar above.

The menu’s position might shuffle based on the conditions.


If not all menu items are displayed at once, menus can be scrollable. In this state, menus show a persistent scrollbar.

Expanding menu groups

Only a certain row of chips will be displayed in the menu. To expand all the items within the category, click on the indicator (e.g. ‘+7’).