Now you can replace core navigation block with our Navigation Element that gives you full flexibility options and 100% performance (our menu script is just 2kb not zipped)
Using this Element is quite simple, because it’s not hard coded block, it’s working as preset of other blocks, and you are not limited in structure and type of blocks. The only thing that you should keep is a set of classes.
When you need to add menu item, select Menu area and find buttons in right side. But also you can duplicate menu item as usual block copy
Menu styles are added on block classes, so if you want to change global style of menu items, click on class and select proper subselector
Practically, you may want to change only top level and sub level styles of menu items
You can also style menu items locally for each item. For this, when you change local styles, enable Specificity icon
Dropdown menus are available on hover, but in editor it will be hard to add content on hovered items, because they are losing focus. For this reason we added option to activate dropdown. For this, click on menu item and activate dropdown
So, when you want to edit dropdown content – activate it, add content and deactivate. You can also keep it active if you want to have dropdown to be always opened on frontend
You can build own structure of menu, but please keep next classes
gs-menu-item-has-children class must be on menu item with dropdown
gs-nav-trigger must be on first child element, it will work as trigger for mobile panel sliding
gs-dropdown-menu must be on inner dropdown menu area
Mobile panel
One of reason why we made Navigation Element is because you have very powerful mobile sliding panel. Menu is automatically copied from desktop but you can remove copy area and use your own mobile menu content. Menu levels will work as sliding zone
To start customizing mobile panel, select Navigation element and click to show mobile panel.
You will see there few areas.
Back Button
It has class gs-nav-back-trigger. This class is required to make this button to work as back button to previous sliding level. Keep this block inside Sliding area and keep class gs-nav-back-trigger-copy and this button will be copied automatically on each sub menu level.
Menu Copy Area
Keep this area if you want to copy items from desktop menu to mobile panel. You can style also menu items if you click on gs-nav-menu class. Also, preset includes animation for menu items, remove them if you don’t need animation
If you want, you can make own mobile menu that is not connected to main. Just make sure that you have the same classes for menu structure as on desktop – gs-menu-item-has-children, gs-nav-trigger, gs-dropdown-menu and they will work as sliding zone.
But it’s not required to use Sliding zone, you can build menu as accordions, just place there accordion Element.
Top and bottom Static Areas in Mobile panel
You may want to have static zones in menu. For example, it’s good to place search Element in top area and some contact buttons in bottom. For this simply put what you need in relevant sections.
You can also automatically copy header elements from desktop. For this, click on Trigger Button and find dynamic attributes
You can put CSS selectors for these attributes and elements from these selectors will be copied to top or bottom area of mobile panel
Animation of panel
By default, Clip animation is used, but you can select any other in Sliding Panel. Also you can change design of panel. For example, change width or color
<!-- wp:paragraph -->
<p>Now you can replace core navigation block with our Navigation Element that gives you full flexibility options and 100% performance (our menu script is just 2kb not zipped)</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Using this Element is quite simple, because it's not hard coded block, it's working as preset of other blocks, and you are not limited in structure and type of blocks. The only thing that you should keep is a set of classes.</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-53492d0","type":"inner","localId":"gsbp-53492d0"} -->
<div><!-- wp:greenshift-blocks/element {"id":"gsbp-28e3698","tag":"video","localId":"gsbp-28e3698","src":"https://greenshiftwp.com/wp-content/uploads/2025/07/menu.mp4","alt":"","mediaid":5893,"originalWidth":2004,"originalHeight":1080,"controls":true,"styleAttributes":{"maxWidth":["100%"]}} -->
<video class="gsbp-28e3698" controls><source src="https://greenshiftwp.com/wp-content/uploads/2025/07/menu.mp4" type="video/mp4"/></video>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/video {"id":"gsbp-b4a06b7","src":"https://www.youtube.com/watch?v=EsZkg_cHroY","provider":"youtube","poster":"https://i.ytimg.com/vi/EsZkg_cHroY/maxresdefault.jpg","isOverlay":true,"overlayIcon":true,"overlayLightbox":true,"postDate":"2025-07-19T09:59:31+00:00","bgColor":"#000000","bgGradient":null} -->
<div class="wp-block-greenshift-blocks-video gs-video youtube gspb_video-id-gsbp-b4a06b7" id="gs-video-gsbp-b4a06b7"><div class="gs-video-wrapper" itemscope><iframe class="gs-video-element" data-src="https://www.youtube.com/watch?v=EsZkg_cHroY" data-provider="youtube" data-autoplay="true" data-playsinline="false" data-controls="true" data-loop="false" data-mute="false" data-overlay="true" data-lightbox="true" data-modestbranding="false" data-suggested="true" frameborder="0" allowfullscreen></iframe><div class="gs-video-overlay" style="background-image:url(https://i.ytimg.com/vi/EsZkg_cHroY/maxresdefault.jpg)" data-type="youtube" data-lightbox="true"><div class="gs-play-icon" style="background-color:#cc0000"><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0"></div><span></span><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0;animation-delay:0.5s"></div></div><div class="gs-overlay-color" style="background-color:#000000;background-image:;opacity:0.5"></div></div></div></div>
<!-- /wp:greenshift-blocks/video -->
<!-- wp:paragraph -->
<p> When you need to add menu item, select Menu area and find buttons in right side. But also you can duplicate menu item as usual block copy</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5895,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2025/07/[email protected]" alt="" class="wp-image-5895"/></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>Menu styles are added on block classes, so if you want to change global style of menu items, click on class and select proper subselector</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5898,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2025/07/[email protected]" alt="" class="wp-image-5898"/></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>Practically, you may want to change only top level and sub level styles of menu items</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>You can also style menu items locally for each item. For this, when you change local styles, enable Specificity icon</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5899,"width":"300px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2025/07/[email protected]" alt="" class="wp-image-5899" style="width:300px"/></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>Dropdown menus are available on hover, but in editor it will be hard to add content on hovered items, because they are losing focus. For this reason we added option to activate dropdown. For this, click on menu item and activate dropdown</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5900,"width":"300px","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2025/07/[email protected]" alt="" class="wp-image-5900" style="width:300px"/></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>So, when you want to edit dropdown content - activate it, add content and deactivate. You can also keep it active if you want to have dropdown to be always opened on frontend</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/infobox {"id":"gsbp-d53894b"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-d53894b" id="gspb_infoBox-id-gsbp-d53894b"><div class="gs-box info_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>You can build own structure of menu, but please keep next classes</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><em><strong>gs-menu-item-has-children</strong></em> class must be on menu item with dropdown</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><em><strong>gs-nav-trigger</strong></em> must be on first child element, it will work as trigger for mobile panel sliding</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><em><strong>gs-dropdown-menu</strong></em> must be on inner dropdown menu area</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="mobile-panel">Mobile panel</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>One of reason why we made Navigation Element is because you have very powerful mobile sliding panel. Menu is automatically copied from desktop but you can remove copy area and use your own mobile menu content. Menu levels will work as sliding zone</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>To start customizing mobile panel, select Navigation element and click to show mobile panel.</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5902,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2025/07/[email protected]" alt="" class="wp-image-5902"/></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>You will see there few areas.</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="back-button">Back Button</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>It has class <em><strong>gs-nav-back-trigger</strong></em>. This class is required to make this button to work as back button to previous sliding level. Keep this block inside Sliding area and keep class <em><strong>gs-nav-back-trigger-copy</strong></em> and this button will be copied automatically on each sub menu level. </p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="menu-copy-area">Menu Copy Area</h3>
<!-- /wp:heading -->
<!-- wp:image {"id":5903,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2025/07/[email protected]" alt="" class="wp-image-5903"/></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>Keep this area if you want to copy items from desktop menu to mobile panel. You can style also menu items if you click on gs-nav-menu class. Also, preset includes animation for menu items, remove them if you don't need animation</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>If you want, you can make own mobile menu that is not connected to main. Just make sure that you have the same classes for menu structure as on desktop - <em><strong>gs-menu-item-has-children</strong></em>, <em><strong>gs-nav-trigger</strong></em>, <em><strong>gs-dropdown-menu</strong></em> and they will work as sliding zone. </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>But it's not required to use Sliding zone, you can build menu as accordions, just place there accordion Element. </p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="top-and-bottom-static-areas-in-mobile-panel">Top and bottom Static Areas in Mobile panel</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>You may want to have static zones in menu. For example, it's good to place search Element in top area and some contact buttons in bottom. For this simply put what you need in relevant sections.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>You can also automatically copy header elements from desktop. For this, click on Trigger Button and find dynamic attributes</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5904,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2025/07/[email protected]" alt="" class="wp-image-5904"/></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>You can put CSS selectors for these attributes and elements from these selectors will be copied to top or bottom area of mobile panel</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="animation-of-panel">Animation of panel</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>By default, Clip animation is used, but you can select any other in Sliding Panel. Also you can change design of panel. For example, change width or color</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5905,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2025/07/[email protected]" alt="" class="wp-image-5905"/></figure>
<!-- /wp:image -->
