Features
Mega menu
Learn how to configure mega menu navigation
Enterprise Commerce features a versatile mega menu component that enhances navigation and provides users with quick access to various sections of your online store. This mega menu is highly customizable and can be tailored to fit your specific needs and branding.
Structure and Schema
The mega menu is built using a flexible schema that allows for nested navigation items and different submenu styles. The NavItem
interface defines the structure of each menu item:
interface NavItem {
text: string
href?: string
submenu?: {
variant: "text-grid" | "image-grid" | "text-image-grid"
items: NavItem[]
}
}
Each NavItem
can have a text label, an optional link (href
), and an optional submenu. The submenu can be displayed in different variants:
- Text Grid: A grid layout displaying text links for subcategories.
- Image Grid: A grid layout showcasing images with corresponding text links.
- Text-Image Grid: A combination of text links and image links.
You can adjust the data in app/layout.tsx
file.