Navigation & Headers
Menu Side by Side
Desktop side-by-side off-canvas category menu with slide-in transitions between hierarchical levels.
Overview
MenuSideBySide brings the mobile-app side-by-side category browsing pattern to desktop. The off-canvas panel slides in from the left; tapping a node slides the next level in alongside it. 300ms transitions and a back button keep the hierarchy obvious as users drill in and out. The panel keeps main content visible behind it so shoppers stay oriented while browsing categories.
The compound is MenuSideBySide (root) plus MenuSideBySideRoot, MenuSideBySideChild, and MenuSideBySideNode for the individual nodes.
Reuse the same category data on MobileMenuShop so desktop and mobile menus stay in sync.
Key Business & UX Benefits
- Drill-down with the main page still visible keeps shoppers oriented in deep catalogs, which reduces drop-off compared with full-page or full-overlay category pickers.
- 300ms transitions and a back button make the hierarchy obvious, so even occasional visitors can find a niche category without learning the site first.
- The same category data backs desktop and mobile menus, so a category rename or reorder ships everywhere in one Studio edit instead of two parallel changes.
- Familiar mobile-app browsing pattern on desktop shortens the learning curve for app-first audiences and lifts engagement on deep taxonomies.
Pro-Tip from Larry: Pass the same
navigationMenuItems to MobileMenuShop so the desktop drill-down and mobile menu reflect the same catalog.Usage
LMenuSideBySide
Feature List
- Off-canvas panel slides in from the left and the next level slides in alongside it as users drill into the catalog
- 300ms transitions plus a back button keep the hierarchy obvious during drill-in and drill-out
- Main page stays visible behind the panel so shoppers keep their place in the catalog
- Compound splits into `MenuSideBySide`, `MenuSideBySideRoot`, `MenuSideBySideChild`, and `MenuSideBySideNode` for per-level control
- Same `navigationMenuItems` array can be reused by `MobileMenuShop` to keep desktop and mobile catalogs in sync
- Familiar mobile-app browsing pattern on desktop shortens the learning curve for app-first audiences
API Reference
LMenuSideBySide
| Prop | Default | Type |
|---|---|---|
categoryNodesrequired | NavigationNode[] { id, title, media, 4 more } | |
selectedItemId | string | |
logo | ||
categoryListPageHref | string | |
rootMenuItems | MobileMenuListItemProps[] { icon, showChevron, href, 2 more } | |
open | boolean |
| Event | Type |
|---|---|
update:open | (event: "update:open", value: boolean): void |
update:selectedItemId | (event: "update:selectedItemId", value: string): void |
LMenuSideBySideRoot
| Prop | Default | Type |
|---|---|---|
categoryNodesrequired | NavigationNode[] { id, title, media, 4 more } | |
menuItems | MobileMenuListItemProps[] { icon, showChevron, href, 2 more } | |
activeCategoryIds | string[] |
| Event | Type |
|---|---|
nodeClick | (event: "nodeClick", categoryNode: NavigationNode): void |
LMenuSideBySideChild
| Prop | Default | Type |
|---|---|---|
titlerequired | string | |
categoryNodesrequired | NavigationNode[] { id, title, media, 4 more } | |
href | string | |
activeCategoryIds | string[] |
| Event | Type |
|---|---|
nodeClick | (event: "nodeClick", categoryNode: NavigationNode): void |
LMenuSideBySideNode
| Prop | Default | Type |
|---|---|---|
idrequired | string | |
titlerequired | string | |
media | ||
showChevron | boolean | |
href | string | |
active | boolean | |
children | NavigationNode[] { id, title, media, 4 more } |
| Event | Type |
|---|---|
nodeClick | (event: "nodeClick", navigationNode: NavigationNode): void |