설명
SanBar Menu Maker is a modular menu builder for WooCommerce stores. Create as many menus as you need, of five different types, and drop them anywhere on the site via shortcode. Every menu is edited in a split-screen editor with a live preview against your real theme.
Menu types included
- Mega Menu — horizontal bar with dropdowns of subcategories (hover, click or tap), scroll arrows when the items don’t fit, and an optional mobile button. Ideal for the desktop header.
- Accordion — vertical menu with banner images per category and expandable panels of subcategories, one open at a time. Ideal for mobile and landing pages.
- Tiles — image grid of categories with title overlay. Adjustable columns, aspect ratio and hover zoom.
- Top Bar — simple horizontal link bar with optional subcategory dropdowns. Configurable separators, alignment and wrap/scroll overflow.
- Mobile — stacked categories for small screens: cards with a background image or a simple list, one category open at a time. Connect it to a Mega, Top Bar or Accordion menu to open it from a “☰ Categories” button.
Highlights
- Multiple menus — unlimited menus of any type, each independently configured.
- Local category order — the order set inside a menu is local to that menu; WooCommerce category order (term_order, menu_order) is never modified.
- Media Library banners — banners are stored as attachment IDs, with srcset, lazy loading and proper WordPress image sizing.
- Live preview — the right pane shows your real theme with the menu rendered inside. Every change autosaves and refreshes the preview without a full reload; saving and preview happen in a single request, and quick consecutive changes are merged.
- Drag-and-drop reordering — reorder categories by dragging the handle. No page reload.
- Independent enable/expand — disabling a category no longer collapses its edit fields.
- Menu icons — add an icon to any category, subcategory or extra link. Choose from Lucide, Font Awesome Free, Bootstrap Icons, Dashicons, emoji, your own image or the category image, using a searchable picker (including Portuguese search and suggestions based on the category name). Position, size, color and icon-only options. Icons are inline SVG: no external requests.
- Mobile menus — desktop keeps the menu as designed, small screens get a “☰ Categories” button that opens an accordion panel. Use the automatic accordion or choose a separate Mobile menu for each menu. The menu listing shows the connections with colored badges.
- Sticky menu — keep a Mega, Top Bar or the mobile button fixed while scrolling: always fixed, hide on scroll down and show on scroll up, or compact. Device, offset and theme-header options, with no page jump.
- Hover, click or tap — choose how subcategories open: on hover, on touch screens only, or by click/tap on any device. A “View all” link is added to the dropdown in the click and touch modes.
- Dropdown direction and alignment — open dropdowns upward for menus at the bottom of the page, and center them under the category while keeping them inside the menu width and the screen.
- Scroll arrows — when a Mega or Top Bar doesn’t fit, arrows appear only in the direction that has more items. Prominent (round button) or subtle (faded edge with a marker line) style, adapting to the bar height, plus mouse drag to scroll.
- Accessibility — ARIA states on parent items, keyboard support (Enter, Space, Esc) in the click and touch modes, and reduced-motion support.
- Translation ready — every string uses the
sanbar-menu-makertext domain and a.pottemplate is included. Translations load from translate.wordpress.org or from your own.mofiles. - HPOS compatible — declared compatible with WooCommerce’s high-performance order storage.
- SB Softwares Hub integration — appears as a submenu of the SB Softwares Hub when installed, or as a standalone top-level menu otherwise.
- Legacy migration — one-click import from the previous sanbazar-mega-menu-v2 and sanbazar-menu-accordion plugins. Slugs are resolved to term IDs and banner URLs to attachment IDs automatically.
Shortcodes
[sanbar_mega_menu id="X"][sanbar_accordion id="X"][sanbar_tiles id="X"][sanbar_topo id="X"][sanbar_mobile id="X"]
The id attribute is optional. When omitted, the plugin uses the first published menu of that type.
Mobile menus are normally selected in the Mobile tab of another menu; the [sanbar_mobile] shortcode places one on its own.
Third-party libraries
The editor bundles Alpine.js 3.15.12 and SortableJS 1.15.7 (both MIT), served locally.
The bundled icons are open source and are printed as inline SVG (no external requests): Lucide (ISC), Bootstrap Icons (MIT), Font Awesome Free (icons CC BY 4.0, fonts SIL OFL 1.1, code MIT; https://fontawesome.com) and Dashicons (GPL-2.0-or-later). License texts are in assets/icons/LICENSES.txt.
스크린샷
설치
- Upload the plugin folder to
/wp-content/plugins/or install through the WordPress plugin screen. - Activate the plugin.
- Make sure WooCommerce is active.
- Go to SanBar Menu Maker (or SB Softwares Menu Maker if the Hub is installed) to create your first menu.
- If you had the old sanbazar mega menu or accordion plugin installed, an admin notice offers to import your existing settings.
FAQ
-
Does it change WooCommerce category order?
-
No. The order you set inside a menu is local to that menu. WooCommerce category order and
menu_ordervalues are never touched. -
Yes. Create as many mega menus, accordions, tiles, top bars or mobile menus as needed. Each has its own shortcode with the menu ID.
-
Does the live preview affect the site?
-
No. Menus stay in draft while you edit them; nothing appears on the front-end until you click Publish. The preview iframe is only visible to authenticated administrators.
-
How do I migrate from the old plugins?
-
Install and activate SanBar Menu Maker. The old plugins can remain installed. A blue admin notice will appear on the listing screen with a Run migration button. Migration is idempotent — running it again does no harm and does not create duplicates; a menu already migrated from a given source is simply skipped.
-
Is it compatible with High-Performance Order Storage (HPOS)?
-
Yes. The plugin declares compatibility with
custom_order_tables. -
Where can I translate strings I don’t like?
-
Use translate.wordpress.org to contribute a translation, or place your own
sanbar-menu-maker-{locale}.mofile inwp-content/languages/plugins/(any Poedit-like tool compiles it from the.pottemplate in the plugin’slanguages/folder). WordPress picks it up automatically. -
Open a Mega, Top Bar or Accordion menu, go to the Mobile tab and turn the button on. By default it opens the same categories as an accordion. To design the mobile list separately, create a menu of type Mobile (cards with a background image or a simple list), publish it and choose it in the Mobile menu field. A Mobile menu must be published; otherwise the automatic accordion is used and the editor shows a warning.
-
Open the menu’s Sticky tab and choose a mode. If your theme already has a fixed header, enter its CSS selector (for example
.site-header) so the menu sticks right below it. The WordPress admin bar is discounted automatically. -
Can I use my own icons?
-
Yes. In the Categories tab open a category and click Choose icon. Besides the bundled sets you can pick an image from the Media Library, paste any emoji or use the category image. Subcategories and extra links can have icons too.
-
On touch screens tapping a category goes to its page, so I can’t reach the subcategories
-
In the Appearance tab of a Mega or Top Bar menu, set Open subcategories on to Touch screens only or Click or tap. The first tap opens the dropdown and a “View all” link takes visitors to the category.
-
Set Dropdown direction to Up in the Appearance tab, and Dropdown alignment to Centered if you want it kept inside the menu width.
-
Does the plugin load anything from external servers?
-
No. Icons are bundled inline SVG, and all scripts and styles are served from the plugin folder.
-
This almost always means the shortcode ended up wrapped in an element it shouldn’t be in. Two common causes:
- A “Code” element instead of a “Shortcode”/”HTML” element. Some header/page builders offer a “Code” block meant for displaying code snippets (like documentation), which wraps its content in
<code>tags. If you paste a shortcode there, the browser applies<code>‘s default styling (monospace font, background, padding) to the menu, and this can cascade into visibly wrong heights or fonts. Use your builder’s plain “Shortcode” or “HTML”/”Custom HTML” element instead — never a “Code”/”Display code” one. - A leftover
<p>tag around the shortcode. Some classic/visual editors auto-wrap loose text in<p>...</p>, including shortcodes typed on their own line. Since block-level output (like a nav bar) isn’t valid inside a<p>, browsers silently “fix” the HTML by splitting the paragraph, which can introduce extra margin or stray empty elements around the menu. If you can, switch to the block’s “Code”/”Text” view and remove any<p>and<code>tags surrounding the shortcode, leaving just[sanbar_mega_menu id="X"]on its own.
Each menu type also includes a defensive CSS reset that neutralizes the most common leaked styles (font, background, padding, border) if it ends up inside an unexpected wrapper — but placing the shortcode in the correct element type is still the more reliable fix.
- A “Code” element instead of a “Shortcode”/”HTML” element. Some header/page builders offer a “Code” block meant for displaying code snippets (like documentation), which wraps its content in
후기
이 플러그인에 대한 평가가 없습니다.
기여자 & 개발자
변경이력
1.2
- New: Mobile menu type (cards with a background image or a simple list, one category open at a time) and a “☰ Categories” mobile button for Mega, Top Bar and Accordion menus. Choose which Mobile menu each menu uses; the menu listing and the editor show the connection with colored badges.
- New: Menu icons for categories, subcategories and extra links (Mega, Top Bar, Accordion and Mobile): Lucide, Font Awesome Free, Bootstrap Icons, Dashicons, emoji, your own images or the category image. Searchable picker with Portuguese search and suggestions, and position, size, color and icon-only options.
- New: Sticky menu for Mega, Top Bar and the mobile button: always fixed, hide on scroll down and show on scroll up, or compact, with device, offset and theme-header options.
- New: “Open subcategories on” option for Mega and Top Bar: hover, touch screens only, or click/tap on any device, with a “View all” link in the dropdown.
- New: Dropdown direction (down or up) and dropdown alignment (auto or centered, always kept inside the menu width and the screen) for Mega and Top Bar.
- New: Scroll arrows for Mega and Top Bar: prominent or subtle style, shown only in the direction that has more items, sized to the bar height, with mouse drag to scroll.
- Improvement: Much faster editor autosave. Saving and preview refresh happen in a single request, quick consecutive changes are merged, and subcategories load in one query.
- Improvement: ARIA states, keyboard support and reduced-motion support for the new interactions.
- Fix: Dropdowns of a scrolling Mega menu could extend beyond the content area. They now stay inside it.
- Fix: Removed the PHP 8-only “mixed” return type from the cache helper, restoring compatibility with the declared minimum of PHP 7.4.
- Small quality improvements.
1.1.1
- Fix: Dynamic menu styles now print immediately before shortcodes rendered after wp_head, preventing an unstyled menu flash during navigation.
1.1
- New: Bar corner radius option (0-30px) for Mega Menu and Top Bar.
- New: Dropdown corner radius option (0-30px) for Top Bar.
- New: Dropdown shadow option (None, Subtle, Medium, Strong) for Mega Menu and Top Bar.
- Improvement: Editor and listing buttons and selects standardized (5px radius, uniform toolbar height, Publish button aligned with the rest).
- Improvement: Colored action badges (Edit, Publish, Duplicate, Delete) in the menu listing, on a single row.
- Fix: Links in the editor preview no longer navigate away from the preview (all menu types).
1.0
- Initial release.