Vertical Menu
The Vertical Menu layout places navigation along the side of the page rather than at the top, offering a distinctive look and extra space for content-rich menus.
This header layout features a vertical navigation menu placed on the left side of the page, creating a structured and easily accessible browsing experience. It’s ideal for eCommerce websites with extensive product categories, providing quick access to multiple sections while maintaining a clean and modern appearance.
This Vertical Menu Header Type efficiently combines Badges, Megamenu functionality, Menu Icons, Contact Information, and a Top Bar, providing an intuitive and highly navigable interface suitable for multi-category online stores or marketplaces.
Location: Header → Header Design → Vertical Menu
The Vertical Menu header layout positions the navigation along the side of the store, offering a clean and functional structure ideal for large product catalogs or multi-level menus. It includes settings for layout width, sticky behavior, logo customization, typography, padding, colors, and predictive search. The design supports a fixed menu panel and adaptive alignment for both desktop and mobile views.
Vertical Menu — Options Overview
Category
Option
Values / Inputs
Description
Menu
Width
Default, Boxed, Wide
Defines the header container width. The Wide option is optimized for screens 1440px and wider.
Enable sticky header
None, Mobile, Desktop, All screens
Determines where the header remains visible while scrolling.
Sticky header
On scroll up, Always
Controls how the sticky header appears during page scroll.
Desktop Logo
Image
Upload
Upload a logo image for desktop view.
SVG code
Custom SVG input
Allows using an SVG instead of an image. The SVG must include defined width and height attributes.
Logo width
Numeric (px)
Sets the display width of the desktop logo.
Mobile Logo
Image
Upload
Upload a logo image for mobile view.
SVG code
Custom SVG input
Allows using an SVG for mobile logo; must include width and height attributes.
Logo width
Numeric (px)
Defines the logo width for mobile devices.
Desktop Header Design
Main menu font weight
Normal, Bold
Adjusts the font weight for primary menu text.
Logo position
Left, Center
Aligns the logo within the vertical header area.
Text for icons
Hide, Show, Tooltip
Determines whether icon text labels or tooltips are displayed.
Show menu dividers
Toggle
Displays dividing lines between vertical menu items.
Icons size
Numeric (px)
Sets the pixel size for icons next to menu labels.
Icons padding
Numeric (px)
Adjusts spacing around icons for better visual balance.
Items padding
Numeric (px)
Sets vertical and horizontal spacing between menu items.
Simple submenu top offset
Numeric (px)
Allows fine-tuning of submenu positioning for single-level dropdowns.
Megamenu top offset
Numeric (px)
Adjusts the vertical position of megamenus for visual alignment.
Extra height
Numeric (px)
Adds height to the menu area. Used when State on home page is set to “Opened”.
State on home page
Closed, Opened (one section boxed), Opened (two sections boxed), Opened (one section full width)
Defines how the vertical menu appears on the homepage — closed by default or expanded in different layout modes.
Bottom Line
Show top line
Toggle
Displays a dividing line above the vertical menu.
Width
Fullwidth, Content width
Sets the width span of the bottom line area.
Colors Desktop
Base
Color picker
Main text and icon color.
Accent
Color picker
Highlight color for active or hovered elements.
Lines
Color picker
Color of dividers and separators.
Desktop Colors Continued
Menu button / Menu button text
Color picker
Defines colors for the vertical menu button and its label.
Link / Link hover
Color picker
Colors for menu links and hover states.
Link icon / Link icon hover
Color picker
Colors for icons beside links and their hover states.
Show all / Show all hover
Color picker
Controls color of the “Show all” link and its hover state in expanded menus.
Lines / Background
Color picker
Customizes the color of separator lines and the background area.
Menu Submenu
Link / Link hover
Color picker
Sets submenu link text color and hover color.
Background
Color picker
Defines the background color for submenu panels.
Shadow
Color picker
Adds a drop shadow behind submenus for depth.
User Icons
Icon / Text
Color picker
Colors for user-related icons (cart, account, wishlist).
Icon hover / Text hover
Color picker
Hover state colors for icons and text.
Counter / Counter hover
Color picker
Background color of item counters and their hover state.
Counter text / Counter text hover
Color picker
Colors for numbers inside counters (e.g., cart item count).
Search
Background / Border / Text / Icon
Color picker
Defines colors for the search bar background, border, text, and search icon.
Background hover / Border hover / Outline hover / Text hover / Icon hover
Color picker
Sets hover states for all search-related elements.
Predictive Search
Heading
Color picker
Color for section heading in predictive search dropdown.
Link / Link hover
Color picker
Defines colors for product or page suggestions and their hover states.
Product vendor
Color picker
Color for vendor names in search results.
Product name / Product name hover
Color picker
Colors for product titles and hover effect.
Price / Sale price / Old price
Color picker
Defines pricing display colors for products in predictive search.
Show all / Show hover
Color picker
Color settings for the “Show all results” link and its hover state.
Lines / Background / Shadow
Color picker
Configures divider line color, dropdown background, and box shadow for predictive search results.
Summary
The Vertical Menu layout is ideal for stores with extensive product categories or multi-level navigation. It provides full control over menu alignment, icon styling, spacing, and submenu positioning. The color and predictive search options ensure consistent visual harmony with the rest of your store design.
Last updated