{"id":133,"date":"2025-07-22T07:25:44","date_gmt":"2025-07-22T07:25:44","guid":{"rendered":"https:\/\/php80.local.nextendweb.com\/roland\/mosaicbuilder\/?post_type=documentation&#038;p=133"},"modified":"2026-04-16T13:26:28","modified_gmt":"2026-04-16T13:26:28","slug":"menu","status":"publish","type":"documentation","link":"https:\/\/mosaicbuilder.com\/docs\/elements\/menu\/","title":{"rendered":"Menu"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"384\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Menu-01.png\" alt=\"Menu element placed in the footer section within the Mosaic editor, used for displaying navigation links\" class=\"wp-image-500\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Menu-01.png 656w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Menu-01-300x176.png 300w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Menu-01-400x234.png 400w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/figure>\n\n\n\n<p>The Menu element is typically found in your website&#8217;s footer, located at the very bottom of the page. It\u2019s designed to help visitors easily navigate your site, especially if they didn\u2019t spot these links in the <a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/navbar\/\">Navbar<\/a>. They are great for including links to less frequently visited pages too, like terms and conditions and privacy policy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"structure\">Structure<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"384\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Menu-02.png\" alt=\"Menu structure revealed in Mosaic\u2019s Navigator panel after entering its scope\" class=\"wp-image-501\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Menu-02.png 656w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Menu-02-300x176.png 300w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Menu-02-400x234.png 400w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/figure>\n\n\n\n<p>After entering the Menu\u2019s <a href=\"https:\/\/mosaicbuilder.com\/docs\/editor\/#scopes\">scope<\/a>, you\u2019ll find that by default, it\u2019s made up of one main element.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"menu-link\">Menu link<\/h4>\n\n\n\n<p>By default, the Menu comes with two Menu links. These are your navigation links, which are typically text-based and direct users to different pages or sections of your website. You can also add these links via the <a href=\"https:\/\/mosaicbuilder.com\/docs\/editor\/add-panel\/\">Add panel<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"styling\">Styling<\/h2>\n\n\n\n<p>You can customize all of its settings through the <a href=\"https:\/\/mosaicbuilder.com\/docs\/editor\/style-tab\/\">Style tab<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"additional-elements\">Additional elements<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/navbar\/#dropdown\">Dropdown<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/navbar\/#dropdown-wide\">Dropdown wide<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/navbar\/#wp-menu\">WP menu<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"additional-states\">Additional states<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/navbar\/#current\">Current<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/navbar\/#current-within\">Current within<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/navbar\/#nested-dropdown-mode\">Nested dropdown mode<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/navbar\/#dropdown-opened\">Dropdown opened<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/navbar\/#dropdown-opening\">Dropdown opening<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"creating-a-slide-in-menu\">Creating a Slide-in Menu<\/h2>\n\n\n\n<p>Mosaic doesn\u2019t include a dedicated \u201cslide-in menu\u201d element by default, but you can build one using basic elements and interactions.<\/p>\n\n\n\n<p>This method uses a fixed container and two separate buttons: one to open the menu and one to close it.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"1-create-the-menu-container\">1. Create the Menu Container<\/h4>\n\n\n\n<p>First, go to your <a href=\"https:\/\/mosaicbuilder.com\/docs\/getting-started\/masters\/#managing-masters\">Master<\/a> of your website.<\/p>\n\n\n\n<p>Add a <a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/div\/\">Div element<\/a> to it, for example right under the Body element.<\/p>\n\n\n\n<p>Apply the following styles to the Div:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Position:<\/strong> <code>fixed<\/code><\/li>\n\n\n\n<li><strong>Z-index:<\/strong> <code>100<\/code><\/li>\n\n\n\n<li><strong>Top:<\/strong> <code>0<\/code><\/li>\n\n\n\n<li><strong>Bottom:<\/strong> <code>0<\/code><\/li>\n\n\n\n<li><strong>Left:<\/strong> <code>-100%<\/code><\/li>\n\n\n\n<li><strong>Width:<\/strong> <code>100%<\/code><\/li>\n\n\n\n<li><strong>Background color:<\/strong> choose a color<\/li>\n<\/ul>\n\n\n\n<p>This creates a full-screen container that is positioned outside of the viewport (to the left).<\/p>\n\n\n<div class=\"mb_notice\"><div class=\"mb_notice__title\">Notice<\/div><div class=\"mb_notice__content\">\n<p>\ud83d\udca1 While editing, you should temporarily remove <code>left:-100%<\/code> to make the menu visible.<\/p>\n<\/div><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"2-add-the-open-menu-button\">2. Add the &#8220;Open Menu&#8221; Button<\/h4>\n\n\n\n<p id=\"2-add-the-open-menu-button\">Add a <a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/button\/\">Button element<\/a> <strong>outside of the Div<\/strong>. You can insert it for example right under the Div element until this system is done, and then you can move\/position it anywhere you want.<\/p>\n\n\n\n<p id=\"2-add-the-open-menu-button\">Apply these styles:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Position:<\/strong> <code>fixed<\/code><\/li>\n\n\n\n<li><strong>Z-index:<\/strong> <code>90<\/code> <em>(lower than the menu container)<\/em><\/li>\n\n\n\n<li><strong>Top:<\/strong> <code>20px<\/code><\/li>\n\n\n\n<li><strong>Right:<\/strong> <code>20px<\/code><\/li>\n<\/ul>\n\n\n\n<p id=\"2-add-the-open-menu-button\">This ensures the button will stay behind the menu when it opens.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"3-add-the-close-x-button\">3. Add the &#8220;Close (X)&#8221; Button<\/h4>\n\n\n\n<p>Add another <strong>Button element inside the Div<\/strong> (this will be your close button).<\/p>\n\n\n\n<p>Style it for example like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Position:<\/strong> <code>absolute<\/code><\/li>\n\n\n\n<li><strong>Z-index:<\/strong> 1<\/li>\n\n\n\n<li><strong>Top:<\/strong> <code>20px<\/code><\/li>\n\n\n\n<li><strong>Right:<\/strong> <code>20px<\/code><\/li>\n\n\n\n<li>Set the text of the Button to <strong>\u201cX\u201d<\/strong><\/li>\n<\/ul>\n\n\n\n<p id=\"2-add-the-open-menu-button\">This button will be visible only when the menu is open. You can adjust the positioning later in any way you want.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"4-add-interactions\">4. Add Interactions<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"open-menu-open-button\">Open Menu (Open Button)<\/h5>\n\n\n\n<p>Select the <strong>Open Menu button<\/strong>, then at its <a href=\"https:\/\/mosaicbuilder.com\/docs\/editor\/interactions\/#managing-interactions\">Interactions panel<\/a> add a <strong>Click interaction<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>At <strong>Click \u2192<\/strong> <strong>Action<\/strong>, press <strong>Add action<\/strong> <code>\u2192<\/code> <strong>Translate X<\/strong><\/li>\n\n\n\n<li><strong>From \u2192 To:<\/strong> <code>0 \u2192 100%<\/code><\/li>\n\n\n\n<li>On the <strong>Action<\/strong> tab <code>\u2192<\/code> <strong>Target:<\/strong> Select the <strong>Div<\/strong> (menu container)<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"close-menu-x-button\">Close Menu (X Button)<\/h5>\n\n\n\n<p>Select the <strong>X button inside the Div<\/strong>, then at its <a href=\"https:\/\/mosaicbuilder.com\/docs\/editor\/interactions\/#managing-interactions\">Interactions panel<\/a> add a <strong>Click interaction<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>At <strong>Click \u2192<\/strong> <strong>Action<\/strong>, press <strong>Add action<\/strong> <code>\u2192<\/code> <strong>Translate X<\/strong><\/li>\n\n\n\n<li><strong>To:<\/strong> <code>0%<\/code> (enter it manually, even if you see it as the default value!)<\/li>\n\n\n\n<li>On the <strong>Action<\/strong> tab <code>\u2192<\/code> <strong>Target:<\/strong> Select the <strong>Div<\/strong> (menu container)<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"5-build-your-menu-content\">5. Build Your Menu Content<\/h4>\n\n\n\n<p>As written at the <a href=\"#1-create-the-menu-container\">1st point&#8217;s notice<\/a>, temporarily <strong>remove<\/strong> the Div&#8217;s <strong>left: -100%<\/strong> placement, so you could see your menu.<\/p>\n\n\n\n<p>Now you can freely add any <a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/\">element<\/a> inside the Div, to <strong>build your menu<\/strong>. It can be a Menu element, but you can also use just texts with links or anything else.<\/p>\n\n\n\n<p>And that&#8217;s it, one button opens, another closes the menu! You can adjust this design to your needs, so you don&#8217;t necessarily need to use Button elements, but those could be any other elements too, Image element, Icon element, etc.. And you can adjust their placements to make them fit into your design.<\/p>\n\n\n\n\n","protected":false},"parent":120,"menu_order":28,"template":"","meta":{"_acf_changed":false},"class_list":["post-133","documentation","type-documentation","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>- Docs - Mosaic<\/title>\n<meta name=\"description\" content=\"This document explains the Menu element used in footers for easy navigation. It covers the structure, styling customization, additional elements, and different states for styling.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Menu\" \/>\n<meta property=\"og:description\" content=\"This document explains the Menu element used in footers for easy navigation. It covers the structure, styling customization, additional elements, and different states for styling.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mosaicbuilder.com\/docs\/elements\/menu\/\" \/>\n<meta property=\"og:site_name\" content=\"Mosaic\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/mosaicbuilderwp\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-16T13:26:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Menu-01.png\" \/>\n\t<meta property=\"og:image:width\" content=\"656\" \/>\n\t<meta property=\"og:image:height\" content=\"384\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@MosaicBuilderWP\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/menu\\\/\",\"url\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/menu\\\/\",\"name\":\"- Docs - Mosaic\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/menu\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/menu\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.mosaicbuilder.com\\\/_\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/Menu-01.png\",\"datePublished\":\"2025-07-22T07:25:44+00:00\",\"dateModified\":\"2026-04-16T13:26:28+00:00\",\"description\":\"This document explains the Menu element used in footers for easy navigation. It covers the structure, styling customization, additional elements, and different states for styling.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/menu\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/menu\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/menu\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.mosaicbuilder.com\\\/_\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/Menu-01.png\",\"contentUrl\":\"https:\\\/\\\/cdn.mosaicbuilder.com\\\/_\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/Menu-01.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/menu\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/mosaicbuilder.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elements\",\"item\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/#website\",\"url\":\"https:\\\/\\\/mosaicbuilder.com\\\/\",\"name\":\"Mosaic\",\"description\":\"Mosaic goes beyond page building. It\u2019s a complete theme builder and design system that helps your next website stand out in style, speed, and functionality.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/mosaicbuilder.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"- Docs - Mosaic","description":"This document explains the Menu element used in footers for easy navigation. It covers the structure, styling customization, additional elements, and different states for styling.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mosaicbuilder.com\/docs\/elements\/menu\/","og_locale":"en_US","og_type":"article","og_title":"Menu","og_description":"This document explains the Menu element used in footers for easy navigation. It covers the structure, styling customization, additional elements, and different states for styling.","og_url":"https:\/\/mosaicbuilder.com\/docs\/elements\/menu\/","og_site_name":"Mosaic","article_publisher":"https:\/\/www.facebook.com\/mosaicbuilderwp","article_modified_time":"2026-04-16T13:26:28+00:00","og_image":[{"width":656,"height":384,"url":"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Menu-01.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@MosaicBuilderWP","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mosaicbuilder.com\/docs\/elements\/menu\/","url":"https:\/\/mosaicbuilder.com\/docs\/elements\/menu\/","name":"- Docs - Mosaic","isPartOf":{"@id":"https:\/\/mosaicbuilder.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mosaicbuilder.com\/docs\/elements\/menu\/#primaryimage"},"image":{"@id":"https:\/\/mosaicbuilder.com\/docs\/elements\/menu\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Menu-01.png","datePublished":"2025-07-22T07:25:44+00:00","dateModified":"2026-04-16T13:26:28+00:00","description":"This document explains the Menu element used in footers for easy navigation. It covers the structure, styling customization, additional elements, and different states for styling.","breadcrumb":{"@id":"https:\/\/mosaicbuilder.com\/docs\/elements\/menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mosaicbuilder.com\/docs\/elements\/menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mosaicbuilder.com\/docs\/elements\/menu\/#primaryimage","url":"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Menu-01.png","contentUrl":"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Menu-01.png"},{"@type":"BreadcrumbList","@id":"https:\/\/mosaicbuilder.com\/docs\/elements\/menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mosaicbuilder.com\/"},{"@type":"ListItem","position":2,"name":"Elements","item":"https:\/\/mosaicbuilder.com\/docs\/elements\/"},{"@type":"ListItem","position":3,"name":"Menu"}]},{"@type":"WebSite","@id":"https:\/\/mosaicbuilder.com\/#website","url":"https:\/\/mosaicbuilder.com\/","name":"Mosaic","description":"Mosaic goes beyond page building. It\u2019s a complete theme builder and design system that helps your next website stand out in style, speed, and functionality.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mosaicbuilder.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/mosaicbuilder.com\/wp-json\/wp\/v2\/documentation\/133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mosaicbuilder.com\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/mosaicbuilder.com\/wp-json\/wp\/v2\/types\/documentation"}],"up":[{"embeddable":true,"href":"https:\/\/mosaicbuilder.com\/wp-json\/wp\/v2\/documentation\/120"}],"wp:attachment":[{"href":"https:\/\/mosaicbuilder.com\/wp-json\/wp\/v2\/media?parent=133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}