{"id":164,"date":"2016-03-15T13:48:31","date_gmt":"2016-03-15T13:48:31","guid":{"rendered":"https:\/\/grooni.com\/docs\/groovy-menu\/?page_id=164"},"modified":"2021-01-17T05:57:45","modified_gmt":"2021-01-17T05:57:45","slug":"groovy-menu-types","status":"publish","type":"page","link":"https:\/\/grooni.com\/docs\/groovy-menu\/preset-settings\/general-settings\/general\/groovy-menu-types\/","title":{"rendered":"Groovy menu types"},"content":{"rendered":"<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-39\" src=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2016\/03\/menu_settings-Groovy_menu_types.png\" alt=\"menu_settings-Groovy_menu_types\" width=\"1351\" height=\"644\" srcset=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2016\/03\/menu_settings-Groovy_menu_types.png 1351w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2016\/03\/menu_settings-Groovy_menu_types-300x143.png 300w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2016\/03\/menu_settings-Groovy_menu_types-768x366.png 768w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2016\/03\/menu_settings-Groovy_menu_types-1024x488.png 1024w\" sizes=\"(max-width: 1351px) 100vw, 1351px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Groovy menu type possesses substantial setting which defines layout scheme of Groovy menu. Applying this setting you can choose your menu type, elements align and toggle toolbar.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Groovy menu type has three available settings:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Type<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Align<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Toolbar<\/span><\/li>\n<\/ul>\n<h3><b>Type<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Default: Classic.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Type option is most important settings in Groovy menu. It has the following options:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Classic<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Minimalistic<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Sidebar<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Icon sidebar<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Note: each kind of menu type has it\u2019s own properties and dependencies. These options become available in settings page after choosing a particular type.<\/span><\/p>\n<h3><b>Classic<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Classic menu type has horizontal classic layout with such properties as the menu height, overlapping, sticky settings, styling etc. Referring to mobile resolution (Mobile menu settings) it transforms to vertical layout with different types of appearance.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Classic layout fits almost every site style.<\/span><\/p>\n<h3><b>Minimalistic<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Minimalistic menu type has both vertical layout on desktop and mobile devices resolution. It has logo and menu icon visible by default. Some other internal menu components (such as link items, cart, search) are hidden and will be displayed by clicking on hamburger icon.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This type is suitable for minimalistic sites.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Note: Off-canvas vertical menu appears from menu icon side.<\/span><\/p>\n<h3><b>Sidebar<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Sidebar menu type has vertical layout. All menu components are visible and menu takes its own space (300 px) and shifts left\/right site container. Sidebar menu has almost the same structure as minimalistic menu but menu links are centered relative to viewport.<\/span><\/p>\n<h3><b>Icon sidebar<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Icon sidebar menu type has vertical layout and designed to set icons as top level menu item links. All menu components are visible and menu takes its own space (70px) and shifts left\/right site container.<\/span><\/p>\n<h3><b>Align<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Align settings allows to change alignment of menu components such as logo, top level menu items, search, cart and toolbar components.<\/span><\/p>\n<h4><b>Left<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">The classic type aligns all components from left to right.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The minimalistic aligns logo to left and menu icon to right.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The sidebar and icon sidebar aligns menu to the left.<\/span><\/p>\n<h4><b>Center<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Available for Classic type only. It moves logo between equal amount of menu items (if possible ) and horizontally centers all elements.<\/span><\/p>\n<h4><b>Right<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">The classic type aligns all components from right to left.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The minimalistic aligns logo to right and menu icon to left.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The sidebar and icon sidebar aligns menu to the right.<\/span><\/p>\n<h4><b>Toolbar (top bar menu)<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">The classic type adds toolbar above the main layout.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The other types add toolbar aka top navigation bar below inside the main layout.<\/span><\/p>\n<p>Helpful articles: <a href=\"https:\/\/grooni.com\/docs\/groovy-menu\/faq\/how-to-add-custom-top-bar-menu\/\">How to create a custom top bar in WordPress<\/a>,<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Groovy menu type possesses substantial setting which defines layout scheme of Groovy menu. Applying this setting you can choose your &hellip; <a href=\"https:\/\/grooni.com\/docs\/groovy-menu\/preset-settings\/general-settings\/general\/groovy-menu-types\/\">Read more &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":170,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages\/164"}],"collection":[{"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/comments?post=164"}],"version-history":[{"count":0,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages\/164\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages\/170"}],"wp:attachment":[{"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/media?parent=164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}