A vertical menu for Elementor with collapsible levels — sidebar navigation for docs, shops and large content sites.
Organize your links with collapsible submenus, making navigation clean and user-friendly.
Adjust colors, fonts, spacing, and icons to match your website’s branding and design aesthetics.
Add smooth slide-in and slide-out animations for menu expansion, enhancing user experience.
The vertical menu automatically adapts to all devices, maintaining usability and readability on tablets and mobile screens.
A container holds elements, and it can hold other containers. That is the whole model. Each level decides its own direction, spacing and width, so a page is a short stack of decisions rather than a deep tree.
Keep the nesting shallow. Two levels covers almost every layout on this site, and a flat tree is far easier to make responsive later.
A boxed container still spans the full viewport while capping the width of what sits inside it, so a full-bleed background and a narrow reading column can live on the same element.
Orders, invoices and downloads all live one click apart. The rail keeps the whole account visible while the panel beside it changes, which is the point of a sidebar that expands in place rather than sending anyone back to a menu page.
Licence renewed — annual plan, card ending 4417
Invoice available — ready to download as a PDF
Order shipped — tracking sent to the address on file
Support reply — a note from the team on your open ticket
Hover a category and the sub-list opens over the grid instead of pushing it down the page, so the shopper never loses the row they were looking at.
Rooms, dining, spa and directions are the four things a guest looks for, and they never sit on the same page. A rail that opens in place keeps all four one tap away while the photography behind it does the selling.
Delegates plan their day from the rail on the left. Each day opens to reveal its tracks, the rest stay closed, and nothing about the schedule needs a separate page.
Straight answers about what this one does, where it fits in a real build, and what it costs you to ship.
Read the documentation for this one, or write to us — a human answers inside a business day.
Yes — the Vertical Menu widget in Sky Addons for Elementor is built for exactly that: a stacked list of links with collapsible child levels, a Layout Width slider running 100–1200px, and a separate style section for the submenu so child pages can read quieter than the sections above them.
Accordion opens a submenu in place and pushes the items below it down; Drop flies the submenu out to the right of the sidebar on hover. The flyout only applies from 992px up — below that, Drop falls back to opening in place, so the two settings behave identically on a phone.
Both routes work. The Menu Type control switches between a WordPress menu, rendered at its full nesting depth, and the widget’s own item list, where each row carries a title, link, icon and a level of 1, 2 or 3. The WordPress route stays editable under Appearance → Menus.
No. Vertical Menu comes from Sky Addons for Elementor and runs on free Elementor — neither the menu rendering nor the collapsing behaviour depends on a Pro feature. Elementor Pro only matters if you want to drop the sidebar into a Pro Theme Builder template.
Yes, using the Sticky extension in the free Sky Addons plugin, which adds a Sticky section to the container holding the menu. Set an offset, pick a Stick Until element so the sidebar releases at the end of the article, and switch it off on tablet and mobile where a pinned sidebar gets in the way.
Yes. The Vertical Menu widget carries a separate Sub Menu Style section with its own typography, item padding, item gap, icon spacing, container background, border and radius, plus normal, hover and active colours. That separation is what lets a docs sidebar show bold sections above quieter child pages.
Yes, when a WordPress menu is used: the current item, its parent and its ancestors all take the active style, so the open section stays marked while someone reads a child page. Active text, icon, background and border colours are set independently of the hover state.
Three when the items are typed into the widget — main, submenu and sub-submenu. A WordPress menu is rendered with no depth limit applied, so a documentation tree four or five levels deep belongs in Appearance → Menus rather than in the widget’s own item list.
Not on its own. It is a sidebar and stays a stacked list at every width — there is no hamburger built into it. For phones, place it inside the Off-Canvas or Off-Canvas Menu widget from Sky Addons for Elementor, which bring the toggle button and the sliding panel with them.
Yes, in the widget’s own item list: every row takes an Elementor icon next to the title, and icon colour is set separately from text colour across normal, hover and active. Icon spacing is its own control, and the arrow that marks a parent item has a colour per state too.
