Skip to main content
All CollectionsKeystoneSections
Keystone: Menu drawer
Keystone: Menu drawer
Thomas K avatar
Written by Thomas K
Updated over 2 weeks ago


Menu Drawer Documentation

Summary

The menu drawer provides a convenient and stylish way to showcase a sticky sidebar across your theme. It allows for easy navigation and customization to enhance user experience.


Tips

  • Adding Blocks: To add a Contact form, Newsletter, or an Announcement to your menu:

    1. Navigate to your menu drawer.

    2. Click 'Add block' and select the desired block type.

  • Logo Placement: The logo for your menu drawer can be set at the top of your Menu Drawer Settings.


Menu Drawer Settings

Using the Default Menu

  1. Toggle off the 'Sidebar menu' within your Menu Drawer Settings.

  2. Navigate to your Header Settings and select the menu you would like to display.

  3. Within your Header Settings, you can also toggle off the 'Desktop menu button' to hide the hamburger menu. Don’t forget to add your logo!


Block Settings

How to Add Your Logo to the Sidebar Menu

  1. Within your menu drawer, navigate to 'Logos' settings > Change.

  2. Use a high-quality logo that fits well. For best results, crop any unnecessary white space in the logo file before uploading, as the theme will automatically include white space around the logo.

Use links below to save image.

How to Add Featured Images/Videos to the Sidebar Menu

Cards or blocks can be used to showcase featured images or videos within the desktop drawer menu. This is particularly useful for highlighting top products or collections.

  1. Open the Theme Editor.

  2. Select Menu Drawer from the theme sections.

  3. Click Add Card and select Image/Video.

  4. Click into the newly created block to customize it.

  5. Click Save.

Use links below to save image.

Additional Notes

  • Ensure all images and logos are optimized for web use to maintain fast loading times.

  • Regularly test your menu drawer across different devices to ensure responsiveness and usability.



Did this answer your question?