Combo Menu
Anatomy
-
Container
Loads all other components
-
Filter Chips
Provide options for the user to choose from. Here the chips can be operators, or items from a category.
-
Textual items
Clickable items, can be category names (e.g. Regions) or “Search for ‘xxx’…”
-
Divider
To separate content into clear groups
-
Expanding menu indicator
To indicate more and how many items to be loaded within this category
Behaviour
Position
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.
Cancelling
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.
Scrolling
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’).
