diff --git a/README.md b/README.md
index 85e2752..27feb1a 100644
--- a/README.md
+++ b/README.md
@@ -1275,6 +1275,16 @@ export function ContextMenuViewExample05(props) {
### `ContextMenuView` Example 06
+**Summary**: A context menu that has a destructive submenu.
+
+
+
+| Notes |
+| ------------------------------------------------------------ |
+| You can set the menu options via the `MenuConfig.menuOptions` property. It accepts an array of `UIMenuOptions` strings (e.g. `destructive`, `displayInline`).
If you pass in `['destructive']` to `menuOptions`, it will tint the submenu to red (but it's menu items won't be affected). |
+
+
+
[🔗 Full Example](example/src/examples/ContextMenuViewExample06.tsx)
```jsx
@@ -1289,42 +1299,24 @@ export function ContextMenuViewExample06(props) {
menuItems: [{
actionKey : 'key-01',
actionTitle: 'Action #1',
- icon: {
- type: 'IMAGE_SYSTEM',
- imageValue: {
- systemName: 'folder',
- },
- }
+ // ...
}, {
menuTitle: 'Submenu...',
+ // Create an "destructive" submenu by adding
+ // `destructive` in the menu options...
menuOptions: ['destructive'],
menuItems: [{
actionKey : 'key-01-01',
actionTitle: 'Submenu Action #1',
- icon: {
- type: 'IMAGE_SYSTEM',
- imageValue: {
- systemName: 'star',
- },
- }
+ // ...
}, {
actionKey : 'key-01-02',
actionTitle: 'Submenu Action #2',
- icon: {
- type: 'IMAGE_SYSTEM',
- imageValue: {
- systemName: 'star.lefthalf.fill',
- },
- }
+ // ...
}, {
actionKey : 'key-01-03',
actionTitle: 'Submenu Action #3',
- icon: {
- type: 'IMAGE_SYSTEM',
- imageValue: {
- systemName: 'star.fill',
- },
- }
+ // ...
}]
}],
}}