CS-Cart 'Extended Accordion menu' add-on
Accordion Menu Extended: the most advanced accordion navigation for CS-Cart
Deep catalogs, made effortless. Accordion Menu Extended turns categories, menus, pages, and blog posts into clean, compact navigation that unfolds right in place. The branch a shopper is browsing is already expanded when the page loads, every category shows how many products it really has, and the whole menu runs on native HTML with zero JavaScript. Style it per level, per block, and per storefront, or match your theme in one click, all without touching a single template.
What sets it apart
Zero JavaScript. Zero compromises.
Built on native HTML <details> elements instead of scripts. Nothing to load, nothing to initialize, nothing to break: the menu works before scripts arrive, keeps working after AJAX updates, and even with JavaScript turned off. The smooth expand animation is pure CSS.
Product counters you can trust
Every category shows its product count, and a parent shows the total for its whole branch. Only products your shoppers can actually see are counted: status, user groups, hidden out-of-stock items, and storefront assignment are all respected. The entire catalog is counted in one cached query that refreshes itself when products or categories change.
A finished design in one click
Pick one of six style sets: Light, Dark, Contrast, Neutral, Classic, or From Your Theme, which reads colors straight from your active theme style. Each set is calculated for your exact number of levels, and text colors are chosen by WCAG contrast so every label stays readable.
Pages and blog, not just categories
One add-on covers four block types: Categories, Menu, Pages, and Blog. It even adds a new “Full tree” filling for blog blocks, with a parent picker limited to blog posts. The built-in blog blocks only show flat lists.
One store, many looks
Choose a style set for each block, so the catalog in your sidebar and the blog menu can look different on the same page. In CS-Cart Ultimate, every storefront can have its own colors and typography.
Made for every shopper
Full keyboard navigation with a visible focus ring, expanded and collapsed states announced to screen readers, 44 px touch targets on phones, hover effects only on devices with a mouse, and no animation for visitors who prefer reduced motion.
Six style sets. Calculated, not hard-coded.
These are the real colors the add-on generates for a three-level menu. Pick a set, click Fill in, and fine-tune any color before you save.
Light
Dark
Contrast
Neutral
Classic
From Your Theme
Sample catalog. Parent counters show branch totals: Computers = Laptops + Tablets.
Accordion Menu Extended vs. a typical accordion add-on
| Accordion Menu Extended | Typical accordion add-on | |
|---|---|---|
| Block types | ✓ Categories, Menu, Pages, and Blog | Categories and/or Menu |
| Menu depth | ✓ Up to 8 levels, set per block | Often limited to 1–2 levels |
| Product counters | ✓ Branch totals, only products shoppers can see | Usually none |
| Ready-made style sets | ✓ 6, including one built from your theme | None |
| Colors per level | ✓ Full palette per level, separate active state | A few colors for the whole menu |
| Blog as a tree | ✓ New “Full tree” filling for blog blocks | Not available |
| Current branch open on page load | ✓ Always, highlighted | Not always |
| Multi-Vendor vendor stores | ✓ Hides empty categories, recounts by vendor | Rarely supported |
Everything you get
Navigation
- Accordion menus up to 8 levels deep, depth set for each block
- Current branch expanded and highlighted as soon as the page loads
- Only one open section per level, so the menu never floods the screen
- Three ways to expand: arrow only, row except the title, or full row
- Smooth animation with adjustable duration
- Menu items can open in a new tab and keep their custom CSS classes
Design control
- Six ready-made style sets, including one built from your theme
- Per-level colors for background, gradient, text, and counters
- Separate colors for the active state
- Row height, font size and weight, letter case, level indent
- Row dividers, menu border, rounded corners, counter radius
- Deeper levels automatically inherit the last configured style
Product counters
- Counts for every category, branch totals for parents
- Respects product status, user groups, stock visibility, and storefronts
- One query for the whole catalog, cached and refreshed automatically
- Counters line up in a neat column on every row
Blocks and fillings
- Categories: full tree, dynamic tree, and subcategory tree
- Menu: any menu from Website → Menus
- Pages: full page tree
- Blog: new full tree filling with a blog-only parent picker
- Added through the standard Block Manager, removed just as easily
Multi-Vendor and Ultimate
- Vendor stores hide categories where the vendor has no products
- Counters recalculated for each vendor's range
- Current category highlighted on vendor category pages
- Separate menu cache per vendor
- Own colors and typography for each Ultimate storefront
Accessibility and mobile
- Full keyboard support with visible focus
- Expanded and collapsed states exposed to screen readers
- Links in collapsed branches are skipped by the Tab key
- 44 px minimum row height on touch screens
- Hover highlight only on devices with a mouse
- Respects the reduced motion system setting
Premium add-on. Fair terms.
One license covers one CS-Cart installation, with every storefront it runs.
Lifetime license
Pay once. No subscription, no renewals.
6 months of free support
Included with every purchase.
Any number of storefronts
Multi-storefront setups at no extra fee.
Multi-Vendor included
No surcharge for Multi-Vendor. One price, however many storefronts and vendors you run.
Compatibility
- CS-Cart and Multi-Vendor 4.12.1 and later, including CS-Cart Ultimate
- Admin interface in English, Russian, and German
- Works in all modern browsers; older browsers still get a fully working menu, just without the animation
- Upgrading from version 2.0.3 keeps all your settings
Shoppers judge a store by how quickly they find what they need. Give them navigation that is fast, clear, and beautiful on every device. Accordion Menu Extended is the most complete accordion menu available for CS-Cart: install it, pick a style set, and your catalog is ready.
- Download the installation package from the order page.
- Extract it to the temporary folder.
- Use the “installation instruction.txt” file for the following instruction.
Add-on’s settings
- After the add-on's installation go to the administration panel -> choose Add-ons -> Manage add-ons.
- Click the gear opposite to the add-on name and choose ‘settings’.
- On the ‘General’ tab:
- Licence key -paste the license key that you can find on your order detailed page (the ‘Download’ button).
- Accordion menu levels - specify the number of menu levels you want to display.
- On ‘Level styles’ tabs you can change the accordion menu style according to design of your store.
- Click ‘Save’ button.
How to create an accordion menu block
- Go to Design -> Layouts -> choose the location -> add block to the necessary grid.
- On the appeared window choose the ‘Create new block’ tab and one of the following blocks in it:
- Categories
- Menu
- Pages
- Recent posts
- On the ‘General’ tab type the block name and choose the ‘Accordion menu extended’ template from the selectbox.
- Then click ‘Settings’ opposite 'Template'. The following settings will appear:
- Max level depth - this setting defines the number of Accordion menu levels.
- Open by click on - specify the type of navigation you prefer to use: arrows or full row.
- Show products’ count (only for the ‘Categories’ type of block) - choose if it is necessary to display categories’ and subcategories’ product count or not.
- Click the ‘Create’ button.
