Skip to content

Commit f95a721

Browse files
committed
fixup! fix(cdk/menu): update docs to reflect current implementation and add correct role for triggers
1 parent ed25bfb commit f95a721

File tree

1 file changed

+53
-34
lines changed

1 file changed

+53
-34
lines changed

src/cdk/menu/menu.md

+53-34
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ The directives in `@angular/cdk/menu` set the appropriate roles on their host el
2424
Import the `CdkMenuModule` into the `NgModule` in which you want to create menus. You can then apply
2525
menu directives to build your custom menu. A typical menu consists of the following directives:
2626

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
2929
- `cdkMenuItem` - added to each item in the menu
3030

3131
<!-- example({
@@ -37,9 +37,9 @@ Most menu interactions consist of two parts: a trigger and a menu panel.
3737

3838
#### Triggers
3939

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
4141
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
4343
or keyboard.
4444

4545
<!-- example({"example":"cdk-menu-standalone-trigger",
@@ -54,21 +54,49 @@ When creating a submenu trigger, add both `cdkMenuItem` and `cdkMenuTriggerFor`
5454

5555
#### Menu content
5656

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
6160

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`,
6365
`menuitemradio`, or `group`. Supporting directives that automatically apply these roles are
6466
discussed below.
6567

6668
Note that Angular CDK provides no styles; you must add styles as part of building your custom menu.
6769

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+
6895
### Menu Bars
6996

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.
72100

73101
<!-- example({
74102
"example": "cdk-menu-menubar",
@@ -77,7 +105,8 @@ app menubar. It consists of at least one `CdkMenuItem` which triggers a submenu.
77105

78106
### Context Menus
79107

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
81110
container element with the `cdkContextMenuTriggerFor`, which behaves like `cdkMenuTriggerFor` except
82111
that it responds to the browser's native `contextmenu` event. Custom context menus appear next to
83112
the cursor, similarly to native context menus.
@@ -99,37 +128,25 @@ container element will open.
99128
In the example above, right-clicking on "Inner context menu" will open up the "inner" menu and
100129
right-clicking inside "Outer context menu" will open up the "outer" menu.
101130

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-
114131
### Menu Items
115132

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.
118135

119136
<!-- example({"example":"cdk-menu-standalone-stateful-menu",
120137
"file":"cdk-menu-standalone-stateful-menu-example.html",
121138
"region":"reset-item"}) -->
122139

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.
124141

125142
<!-- example({"example":"cdk-menu-menubar",
126143
"file":"cdk-menu-menubar-example.html",
127144
"region":"file-trigger"}) -->
128145

129146
#### Menu Item Checkboxes
130147

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
133150
does not need the additional `cdkMenuItem` directive.
134151

135152
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.
142159

143160
#### Menu Item Radios
144161

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`
147164
directive does not need the additional `cdkMenuItem` directive.
148165

149166
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
170187

171188
### Smart Menu Aim
172189

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.
176195

177196
![menu aim diagram][diagram]
178197

0 commit comments

Comments
 (0)