Skip to content

Collapsible sidebar vertical sidebar menu block for the Gutenberg editor.

Notifications You must be signed in to change notification settings

wpbean/Vertical-Sidebar-Menu-Block

Repository files navigation

Vertical Sidebar Menu Block

The ultimate WordPress menu block for responsive collapse vertical sidebar menu. Vertical Sidebar Menu Block is a powerful Gutenberg block plugin that allows you to create customizable vertical menus with ease. Perfect for sidebars, navigation panels, or widget areas, this block is designed to enhance your website's user experience while maintaining full compatibility with the WordPress block editor.

Collapsible sidebar menus are an excellent way to improve your site's user experience by allowing visitors to navigate long menus in a compact, organized manner. By hiding or revealing submenu items as needed, a collapsible design saves valuable screen space, keeps navigation clean, and ensures your content remains the primary focus. This is especially useful for websites with complex or multi-level navigation structures.

Key Features

  • Choose Any Navigation Menu: Select and display any WordPress navigation menu.
  • Menu Depth Control: Set the number of menu levels to display.
  • Accordion-Like Menu: Submenus expand and collapse seamlessly for a cleaner layout.
  • Expand Current Menu Item: Automatically expand the menu to show the current item for better navigation clarity.
  • Save Expanded Menu State: Preserve the expanded state of menu items on page reload for a consistent user experience.
  • Parent and Child Typography Settings: Customize fonts, sizes, and styles separately for parent and child menu items.
  • Widget-Ready: Works seamlessly in block widget areas and sidebars.
  • Fully Responsive: Ensures menus look great on any device.
  • Easy to Use: Designed for beginners and developers alike, with an intuitive interface.
  • Compatible With Any Theme: Works flawlessly with any WordPress theme, making it versatile and flexible for all types of websites.

Premium Features:

  • Customizable Colors: Set individual colors for parent, child, and current menu items, including hover states, to enhance the visual hierarchy of your navigation.
  • Customizable Backgrounds: Define unique background colors for parent, child, and current menu items, including hover effects, to create a visually cohesive design.
  • Customizable Spacing: Control the spacing (top, right, bottom, left) for parent and child menu items to ensure your menu fits perfectly within your layout.
  • Child Items Separator: Option to customize child items separator border visibility, width and color.
  • Dedicated Support: Get expert help whenever you need it, ensuring a smooth experience.

Installation

Follow these simple steps to install and use the Vertical Sidebar Menu Block on your WordPress site:

Install and Activate the Plugin

  • Download the plugin from the WordPress Plugin Repository.
  • Navigate to your WordPress admin dashboard.
  • Go to Plugins > Add New, click Upload Plugin, and upload the downloaded .zip file.
  • Alternatively, search for "Vertical Sidebar Menu Block" in the plugin repository directly from your admin dashboard and click Install Now.
  • Once installed, click Activate to enable the plugin on your site.

Using the Block on a Page or Post

  • Open the page or post where you want to add the menu using the WordPress block editor.
  • Search for "Vertical Sidebar Menu Block" in the block library and add it to your content.
  • Select a navigation menu from the block's settings panel.
  • If you haven't created a navigation menu yet, go to Appearance > Menus in the WordPress admin panel, create a new menu, and assign it items.

Using the Block in a Widget Area

  • Go to Appearance > Widgets or Appearance > Customize > Widgets.
  • Add a block widget and search for the "Vertical Sidebar Menu Block."
  • Place the block in the desired widget area and select a navigation menu.

Set Up Your Menu

  • After adding the block, selecting a menu is the first essential step.
  • Customize the block's settings like colors, backgrounds, spacing, typography, and more from the block editor sidebar.

Tips

  • If you don’t see any menu to select, ensure you have created a navigation menu in Appearance > Menus in your WordPress admin dashboard.
  • The block settings allow you to fine-tune the appearance and behavior of your vertical menu, ensuring it matches your site’s design perfectly.

By following these steps, you can create beautiful, collapsible vertical menus for your website's sidebar or widget areas.

FAQ

Is this plugin compatible with all themes?

Yes, the Vertical Sidebar Menu Block is designed to work seamlessly with any WordPress theme. Its flexible settings ensure it can adapt to your site’s design.

What are the minimum WordPress and PHP version requirements?

To use this plugin, ensure your site meets the following requirements:

  • WordPress Version: 6.6 or higher
  • PHP Version: 7.4 or higher

Does this plugin work with WooCommerce?

Absolutely! The Vertical Sidebar Menu Block is fully compatible with WooCommerce. You can use it to create navigational menus for your store's product categories, custom pages, and more.

Can I use this block in widget areas?

Yes! The plugin supports WordPress widgets. You can add the block to widget areas or sidebars via Appearance > Widgets or the Customizer Widgets Panel.

Can I customize the block to match my site’s design?

Definitely! The plugin offers extensive customization options, including:

  • Color, background, and spacing settings for parent, child, and current menu items.
  • Typography controls for parent and child menu items.
  • Icon customization for expanded menu items.
  • These features make it easy to create a menu design that perfectly matches your site's theme.

Does the plugin support saving expanded menu items after page reload?

Yes, the plugin can remember the expanded menu items, enhancing the user experience for returning visitors.

What kind of support is available for the plugin?

The plugin offers dedicated support. You can contact us via the plugin’s support page for any assistance or troubleshooting.

Does this plugin impact website performance?

The Vertical Sidebar Menu Block is optimized for performance. It uses minimal resources to ensure it doesn’t slow down your website.

What should I do if no navigation menu is available to select?

If no menu is available, navigate to Appearance > Menus in your WordPress admin panel to create a new menu. Add your desired links or pages to the menu, then return to the block settings and select it.

Demo

Visit this URL to see this plugin live demo.

https://blocks.wpbean.com/vertical-sidebar-menu-block/

About

Collapsible sidebar vertical sidebar menu block for the Gutenberg editor.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published