Overview
Native menus display options related to the page or object’s content. You can learn more about native menus from Apple's guidelines here.
There are three types of native menus in Play— Button menus, Context menus, and Bar Item menus—each created with a different menu trigger.
Button menus are created with Button Menu triggers. They open a native menu when the user taps on the button the trigger is placed on. Button Menu triggers can only be added to native buttons.
Context menus are created with Context Menu triggers. They open a native menu when the user long presses on the object the trigger is placed on. Context Menu triggers can be added to any object.
Bar Item menus are created with Bar Item Menu triggers. They open a native menu when the user taps on the nav bar item linked to the trigger. Bar Item Menu triggers must be added to the page and connected through the nav bar menu
.
First: Add a Menu Trigger
Whether it's a Button, Context, or Bar Item Menu, the first step in creating a native menu is to add the correct trigger to the object. For the purposes of this article, we’ll walk through how to create a functioning Button menu, but the same process applies to Context and Bar Item menus.
You can add a native button to the page and add a Button Menu trigger to the native button, or you can add one of the button presets that already has a Button Menu added.
Add Menu Items for a Basic Menu
To create a basic menu, just add menu items by adding a different Menu Action for each item. Play will handle the rest natively.
Styling a Basic Menu
Large & Default
To style the menu, adjust properties on the trigger. By default, the Element Size is Large, and the Display is Default. These properties show all menu items in a list.
Why is the "Delete" item red? The Menu Action has Destructive turned on.
Medium & Default
If you change the Element Size to Medium, the first three menu items will be displayed at the top with their icons and labels with the remaining items in a list below.
Small & Default
If you change the Element Size to Small, the first four menu items will be displayed at the top with just their icons with the remaining items in a list below.
Palette
To change the menu to a horizontal scrolling menu, change the Display to Palette. The menu will look the same regardless of the Element Size.
Menus with Palette display prioritize showing the Menu Action's icon but use the Menu Action's label if the Menu Action does not have an icon.
Inline
For Basic menus, Inline displays function the same as Default displays.
Adding Actions to Menu Actions
To trigger other actions when the menu items are tapped, you can add actions to the Menu Actions. You can add any number of actions, including conditions, loops, etc.
Add Submenu Actions for Sections or Submenus
To create a section or submenu within the native menu, add a Sub Menu action and add the Menu Actions to the Sub Menu node. Play will automatically create the section or sub menu based on the Sub Menu action's properties.
Default
If the Sub Menu action's display is Default, the Menu Actions on the Sub Menu action will be moved into a separate sub menu that the user can expand. The style of the sub menu depends on the Sub Menu action's Display and Element Size properties, which are the same as the menu trigger.
Palette
If the Sub Menu action's display is Palette, the Menu Actions on the Sub Menu action will be moved into a separate Palette-style sub menu that the user can expand.
Inline
If the Sub Menu action's display is Inline, the Menu Actions on the Sub Menu action will be separated into a section with dividers around the group of menu items.
Resources
Learn more about each trigger or action from our documentation articles: