Loads all other components
Provide options for the user to choose from. Here the chips can be operators, or items from a category.
Clickable items, can be category names (e.g. Regions) or “Search for ‘xxx’…”
To separate content into clear groups
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’).