@@ -24,8 +24,8 @@ The directives in `@angular/cdk/menu` set the appropriate roles on their host el
24
24
Import the ` CdkMenuModule ` into the ` NgModule ` in which you want to create menus. You can then apply
25
25
menu directives to build your custom menu. A typical menu consists of the following directives:
26
26
27
- - ` cdkMenuTriggerFor ` - links a trigger element to an ` ng-template ` containing the menu the trigger opens
28
- - ` cdkMenu ` - creates the actual menu content that the trigger will open
27
+ - ` cdkMenuTriggerFor ` - links a trigger element to an ` ng-template ` containing the menu to be opened
28
+ - ` cdkMenu ` - creates the menu content opened by the trigger
29
29
- ` cdkMenuItem ` - added to each item in the menu
30
30
31
31
<!-- example({
@@ -37,9 +37,9 @@ Most menu interactions consist of two parts: a trigger and a menu panel.
37
37
38
38
#### Triggers
39
39
40
- ` cdkMenuTriggerFor ` can be added to any button to make it a trigger for the given menu, or any menu
40
+ You can add ` cdkMenuTriggerFor ` to any button to make it a trigger for the given menu, or any menu
41
41
item to make it a trigger for a submenu. When adding this directive, be sure to pass a reference to
42
- the template containing the menu it should open. You can toggle the associated menu using a mouse
42
+ the template containing the menu it should open. Users can toggle the associated menu using a mouse
43
43
or keyboard.
44
44
45
45
<!-- example({"example":"cdk-menu-standalone-trigger",
@@ -54,21 +54,49 @@ When creating a submenu trigger, add both `cdkMenuItem` and `cdkMenuTriggerFor`
54
54
55
55
#### Menu content
56
56
57
- Menu content is created using the ` cdkMenu ` or ` cdkMenuBar ` components. Menus can be always present
58
- on the page (referred to as an inline menu), or shown on trigger activation (referred to as a popup
59
- menu). Popup menus must be wrapped in an ` ng-template ` , as a reference to the ng-template is needed
60
- to pass to the trigger directive.
57
+ There are two types of menus:
58
+ * _ inline menus_ are always present on the page
59
+ * _ pop-up menus_ can be toggled to hide or show by the user
61
60
62
- Menus should exclusively contain elements with role ` menuitem ` , ` menuitemcheckbox ` ,
61
+ You can create menus by marking their content element with the ` cdkMenu ` or ` cdkMenuBar `
62
+ directives. You can create several types of menu interaction which are discussed below.
63
+
64
+ All type of menus should exclusively contain elements with role ` menuitem ` , ` menuitemcheckbox ` ,
63
65
` menuitemradio ` , or ` group ` . Supporting directives that automatically apply these roles are
64
66
discussed below.
65
67
66
68
Note that Angular CDK provides no styles; you must add styles as part of building your custom menu.
67
69
70
+ ### Inline Menus
71
+
72
+ An _ inline menu_ is a menu that lives directly on the page rather than a pop-up associated with a
73
+ trigger. You can use an inline menu when you want a persistent menu interaction on a page. Menu
74
+ items within an inline menus are logically grouped together, and you can navigate through them
75
+ using your keyboard. You can create an inline menu by adding the ` cdkMenu ` directive to the element
76
+ you want to serve as the menu content.
77
+
78
+ <!-- example({
79
+ "example": "cdk-menu-inline",
80
+ "file": "cdk-menu-inline-example.html"
81
+ }) -->
82
+
83
+ ### Pop-up Menus
84
+
85
+ You can create pop-up menus using the ` cdkMenu ` directive as well. Add this directive to the
86
+ element you want to serve as the content for your pop-up menu. Then wrap the content element in an
87
+ ` ng-template ` and reference the template from the ` cdkMenuTriggerFor ` property of the trigger. This
88
+ will allow the trigger to show and hide the menu content as needed.
89
+
90
+ <!-- example({
91
+ "example": "cdk-menu-standalone-menu",
92
+ "file": "cdk-menu-standalone-menu-example.html"
93
+ }) -->
94
+
68
95
### Menu Bars
69
96
70
- The ` CdkMenuBar ` directive follows the [ ARIA menubar] [ menubar ] spec and behaves similar to a desktop
71
- app menubar. It consists of at least one ` CdkMenuItem ` which triggers a submenu.
97
+ Menu bars are a type of inline menu that you can create using the ` cdkMenuBar ` directive. They
98
+ follow the [ ARIA menubar] [ menubar ] spec and behave similarly to a desktop application menubar. Each
99
+ bar consists of at least one ` cdkMenuItem ` that triggers a submenu.
72
100
73
101
<!-- example({
74
102
"example": "cdk-menu-menubar",
@@ -77,7 +105,8 @@ app menubar. It consists of at least one `CdkMenuItem` which triggers a submenu.
77
105
78
106
### Context Menus
79
107
80
- A context menu opens when a user right-clicks within some container element. You can mark a
108
+ A context menus is a type of pop-up menu that doesn't have a traditional trigger element, instead
109
+ it is triggered when a user right-clicks within some container element. You can mark a
81
110
container element with the ` cdkContextMenuTriggerFor ` , which behaves like ` cdkMenuTriggerFor ` except
82
111
that it responds to the browser's native ` contextmenu ` event. Custom context menus appear next to
83
112
the cursor, similarly to native context menus.
@@ -99,37 +128,25 @@ container element will open.
99
128
In the example above, right-clicking on "Inner context menu" will open up the "inner" menu and
100
129
right-clicking inside "Outer context menu" will open up the "outer" menu.
101
130
102
- ### Inline Menus
103
-
104
- An _ inline menu_ is a menu that lives directly on the page rather than a pop-up associated with a
105
- trigger. You can use an inline menu when you want a persistent menu interaction on a page. Menu
106
- items within an inline menus are logically grouped together, and you can navigate through them
107
- using your keyboard.
108
-
109
- <!-- example({
110
- "example": "cdk-menu-inline",
111
- "file": "cdk-menu-inline-example.html"
112
- }) -->
113
-
114
131
### Menu Items
115
132
116
- The ` cdkMenuItem ` directive allows the items to be navigated to via keyboard interaction .
117
- A menuitem can provide some user defined action by hooking into the ` cdkMenuItemTriggered ` output.
133
+ The ` cdkMenuItem ` directive allows users to navigate menu items via keyboard.
134
+ You can add a custom action to a menu item with the ` cdkMenuItemTriggered ` output.
118
135
119
136
<!-- example({"example":"cdk-menu-standalone-stateful-menu",
120
137
"file":"cdk-menu-standalone-stateful-menu-example.html",
121
138
"region":"reset-item"}) -->
122
139
123
- You can create nested menus by using a menuitem as the trigger for another menu.
140
+ You can create nested menus by using a menu item as the trigger for another menu.
124
141
125
142
<!-- example({"example":"cdk-menu-menubar",
126
143
"file":"cdk-menu-menubar-example.html",
127
144
"region":"file-trigger"}) -->
128
145
129
146
#### Menu Item Checkboxes
130
147
131
- A ` cdkMenuItemCheckbox ` is a special type of menuitem that behaves as a checkbox. You can use this
132
- type of menuitem to toggle items on and off. An element with ` cdkMenuItemCheckbox ` directive
148
+ A ` cdkMenuItemCheckbox ` is a special type of menu item that behaves as a checkbox. You can use this
149
+ type of menu item to toggle items on and off. An element with the ` cdkMenuItemCheckbox ` directive
133
150
does not need the additional ` cdkMenuItem ` directive.
134
151
135
152
Checkbox items do not track their own state. You must bind the checked state using the
@@ -142,8 +159,8 @@ don't bind the state it will reset when the menu is closed and re-opened.
142
159
143
160
#### Menu Item Radios
144
161
145
- A ` cdkMenuItemRadio ` is a special type of menuitem that behaves as a radio button. You can use this
146
- type of menuitem for menus with exclusively selectable items. An element with the ` cdkMenuItemRadio `
162
+ A ` cdkMenuItemRadio ` is a special type of menu item that behaves as a radio button. You can use this
163
+ type of menu item for menus with exclusively selectable items. An element with the ` cdkMenuItemRadio `
147
164
directive does not need the additional ` cdkMenuItem ` directive.
148
165
149
166
As with checkbox items, radio items do not track their own state, but you can track it by binding
@@ -170,9 +187,11 @@ If you would like to have unrelated groups of radio buttons within a single menu
170
187
171
188
### Smart Menu Aim
172
189
173
- ` @angular/cdk/menu ` intelligently predicts when a user intends to navigate to an open submenu and
174
- prevent premature closeouts. This functionality prevents users from having to hunt through the open
175
- menus in a maze-like fashion to reach their destination.
190
+ ` @angular/cdk/menu ` is capable of intelligently predicting when a user intends to navigate to an
191
+ open submenu and preventing premature closeouts. This functionality prevents users from having to
192
+ hunt through the open menus in a maze-like fashion to reach their destination. To enable this
193
+ feature for a menu and its sub-menus, add the ` cdkMenuTargetAim ` directive to the ` cdkMenu ` or
194
+ ` cdkMenuBar ` element.
176
195
177
196
![ menu aim diagram] [ diagram ]
178
197
0 commit comments