{"id":8995,"date":"2018-05-16T16:26:19","date_gmt":"2018-05-16T21:26:19","guid":{"rendered":"https:\/\/www.mrc-productivity.com\/docs\/?page_id=8995"},"modified":"2023-12-06T13:19:31","modified_gmt":"2023-12-06T19:19:31","slug":"m-painter-pulldown-menu","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/m-painter-pulldown-menu","title":{"rendered":"m-Painter Pulldown Menus"},"content":{"rendered":"\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Click <a href=\"https:\/\/www.mrc-productivity.com\/legacy\/bootstrap\/m-painter-pulldown-menu\">here<\/a> to view the legacy documentation for this feature.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>A pulldown menu allows you to organize application links\/options within a single location on the screen. This is highly useful when you want to give users the option of several links to click on but have limited screen space to accomplish this. We use pulldown menus throughout m-Power. For instance, the &#8220;Action&#8221; cog wheel on the manage application screen is a good example of a pulldown menu. There are three types of pulldown options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pulldown Menu<\/li>\n\n\n\n<li>Button Menu<\/li>\n\n\n\n<li>Split Button Menu<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">These features are only available within Bootstrap Templates.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"pulldownTypes\">Pulldown Types<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Pulldown Menu <\/h3>\n\n\n\n<p>The pulldown menu adds a text based menu option. When selected, the user then sees all menu options beneath the original text based link.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/pullDownMenu.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: revert; color: initial;\">Button Menu <\/span><\/h3>\n\n\n\n<p>The button menu adds a button based menu option. When the button is clicked, the user then sees all menu options beneath the original button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/pullDownButtonMenu.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Split Button Menu <\/h3>\n\n\n\n<p>The split button menu adds a button based menu option, however the button is now split. If the user clicks on the larger left side of the button they will be sent to the first link specified. However, they can also click on the right side of the button, with the arrow to see the other options available within the menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/pullDownSplitMenu.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p><span style=\"font-size: revert; background-color: rgb(255, 255, 255); color: initial;\"> <\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to add Pulldown Menus<\/h2>\n\n\n\n<p>To begin, open m-Painter and place your cursor where you want your pulldown menu added. From the left-side Component Panel -&gt; Generic UI Components, select &#8220;Pulldown Menu&#8221;. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/pullDownCompPanel.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Once clicked, the default pulldown button menu will appear at the location of the cursor. You can then select the button menu and either click the quick edit icon from the blue navigation bar or click the &#8220;Edit Pulldown Menu&#8221; option from the right-side Element Panel.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/pullDownQuickEdit.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Edit Pulldown Menu<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/pullDownEditMenu.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/pullDownEditMenu.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Menu Style<\/h3>\n\n\n\n<p>This dropdown controls which <a href=\"#pulldown-types\" data-type=\"internal\" data-id=\"#pulldownTypes\">pulldown menu type<\/a> you would like to use. If a Button Menu or Split Button Menu is selected, you have the option to set the Button Style as well.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Menu Title\/Title Icon<\/h3>\n\n\n\n<p>This text will be what the user will click on to activate the pulldown. You can also add an optional Title Icon.<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-alert\">The Split Button Menu type does not use a menu title. Instead, the first menu item will be used as the primary button item.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Menu Items<\/h3>\n\n\n\n<p>This is where you can configure your individual menu items. Feel free to edit\/add\/remove or reorder the options as needed.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Item URL<\/h4>\n\n\n\n<p>You can hardcode a URL or use the &#8220;Configure URL&#8221; button to have m-Painter&#8217;s wizard guide you through constructing a URL to an existing m-Power application.<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Any URL can be used here &#8212; not just m-Power applications.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Item Text\/Icon<\/h4>\n\n\n\n<p>Set the text that appears in the pulldown menu. Optionally, add an icon that will appear to the left of the text.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview A pulldown menu allows you to organize application links\/options within a single location on the screen. This is highly useful when you want to give users the option of several links to click on but have limited screen space to accomplish this. We use pulldown menus throughout m-Power. For&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[263],"ht-kb-tag":[],"class_list":["post-8995","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-bootstrap-templates"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/comments?post=8995"}],"version-history":[{"count":10,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8995\/revisions"}],"predecessor-version":[{"id":13870,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8995\/revisions\/13870"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=8995"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=8995"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=8995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}