You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Dec 31, 2019. It is now read-only.
<pclass="ms-font-l">The Office UI Fabric contains a contextual menu, or a right-click menu, that can be used on pages or within other controls like the <ahref="/components/nav-bar" class="ms-Link">Nav Bar</a> control.</p>
76
+
77
+
<pclass="ms-font-l"><iclass="ms-Icon ms-Icon--chevronsUp"></i><ahref="#Top" class="ms-Link">Back to top</a></p>
78
+
79
+
<aname="Usage"></a>
80
+
<pclass="ms-font-xxl">Usage</p>
81
+
<pclass="ms-font-l">The contextual menu is implemented as a <code><ul></code> list decorated with the <code>.ms-ContextualMenu</code> class. It isn't visible by default but when the css class <code>.is-open</code> class is added to the <code><ul></code> element, the menu is made visible.</p>
82
+
<pclass="ms-font-l">Each list item is implemented as a <code><li></code> decorated with the CSS class <code>.ms-ContextualMenu-item</code> class. You can indicate if an item is currently selected by setting the <code>.is-selected</code> class on the nested <code><a></code> tag, or mark it as disabled using the <code>.is-disabled</code> class.</p>
83
+
<pclass="ms-font-l">You will want to add JavaScript to clear out the placeholder when the control receives focus as shown in the following snippets. An example of this code, using jQuery, can be found in the Office UI Fabric component distribution: <ahref="https://github.com/OfficeDev/Office-UI-Fabric/blob/master/src/components/ContextualMenu/Jquery.ContextualMenu.js" class="ms-Link">Jquery.ContextualMenu.js</a>. This also means that you must include a reference to jQuery as the <code>JQuery.ContextualMenu.js</code> depends on the presence of jQuery.</p>
84
+
85
+
<!-- codepen snippet -->
86
+
<pdata-height="333" data-theme-id="19054" data-slug-hash="wKoeVN" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <ahref='http://codepen.io/andrewconnell/pen/wKoeVN/'>Office UI Fabric - Context Menu (Standard)</a> by Andrew Connell (<ahref='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <ahref='http://codepen.io'>CodePen</a>.</p>
87
+
<!-- /codepen snippet -->
88
+
89
+
<pclass="ms-font-l"><iclass="ms-Icon ms-Icon--chevronsUp"></i><ahref="#Top" class="ms-Link">Back to top</a></p>
90
+
91
+
<aname="Submenus"></a>
92
+
<pclass="ms-font-xxl">Submenus</p>
93
+
<pclass="ms-font-l">To implement a submenu in the contextual menu control you simply next another contextual menu control within the list item that contains the menu item that should open it. You will likely want to add some extra styling, such as an icon, to indicate there's a submenu as shown in the following snippet:</p>
94
+
95
+
<!-- codepen snippet -->
96
+
<pdata-height="334" data-theme-id="19054" data-slug-hash="rOWzBe" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <ahref='http://codepen.io/andrewconnell/pen/rOWzBe/'>Office UI Fabric - Context Menu (Submenu)</a> by Andrew Connell (<ahref='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <ahref='http://codepen.io'>CodePen</a>.</p>
97
+
<!-- /codepen snippet -->
98
+
99
+
<pclass="ms-font-l"><iclass="ms-Icon ms-Icon--chevronsUp"></i><ahref="#Top" class="ms-Link">Back to top</a></p>
100
+
101
+
<aname="Dividers"></a>
102
+
<pclass="ms-font-xxl">Dividers</p>
103
+
<pclass="ms-font-l">To add a divider in the menu, add another <code><li></code> to the menu, but add the CSS class <code>.ms-ContextualMenu-item--divider</code> with nothing else in the item as shown in the following example:</p>
104
+
105
+
<!-- codepen snippet -->
106
+
<pdata-height="393" data-theme-id="19054" data-slug-hash="pjNroo" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <ahref='http://codepen.io/andrewconnell/pen/pjNroo/'>Office UI Fabric - Context Menu (Dividers)</a> by Andrew Connell (<ahref='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <ahref='http://codepen.io'>CodePen</a>.</p>
107
+
<!-- /codepen snippet -->
108
+
109
+
<pclass="ms-font-l"><iclass="ms-Icon ms-Icon--chevronsUp"></i><ahref="#Top" class="ms-Link">Back to top</a></p>
110
+
111
+
<aname="Headings"></a>
112
+
<pclass="ms-font-xxl">Headings and Multi-select</p>
113
+
<pclass="ms-font-l">Add a non-selectable heading to the menu for groups of items, typically seperated with dividers, by adding another <code><li></code> item and add the CSS class <code>.ms-ContextualMenu-item--header</code>. In addition you can make the menu items multi-selectable by adding the CSS class <code>.ms-ContextualMenu--multiselect</code> which lets you pick check-marks next to multiple list items. This class should be added to the top-level <code><ul></code> element.</p>
114
+
115
+
<!-- codepen snippet -->
116
+
<pdata-height="469" data-theme-id="19054" data-slug-hash="rOWzNL" data-default-tab="result" data-user="andrewconnell" class='codepen'>See the Pen <ahref='http://codepen.io/andrewconnell/pen/rOWzNL/'>Office UI Fabric - Context Menu (Headings+Multiselect)</a> by Andrew Connell (<ahref='http://codepen.io/andrewconnell'>@andrewconnell</a>) on <ahref='http://codepen.io'>CodePen</a>.</p>
117
+
<!-- /codepen snippet -->
118
+
119
+
<pclass="ms-font-l"><iclass="ms-Icon ms-Icon--chevronsUp"></i><ahref="#Top" class="ms-Link">Back to top</a></p>
0 commit comments