Responsive Grid Menu
The Grid Menu in Navi+ is designed with a mobile-first approach. This means you configure and optimize the menu on mobile first, and the desktop version will automatically scale from the mobile layout instead of being rebuilt from scratch.
Grid Menus are typically used to highlight key features or important categories, usually with 8 to 12 items. On mobile, the grid is commonly displayed in 2 to 3 rows, with 4 to 5 items per row. To achieve this, you can use the Width Layout setting, such as 3/12 or 2/10, to control how the grid fits on smaller screens.
On desktop, the available screen width is much larger (often equivalent to 2–3 mobile screens). If the grid still shows only 4–5 items per row, it can look too sparse. To solve this, Navi+ provides the Desktop/mobile display ratio setting. For example, when you set a 2x ratio, the number of items shown per desktop row will be doubled compared to mobile, resulting in 8–10 items per row, which creates a more balanced layout on large screens.
On mobile, Grid Menus can be displayed in two ways. The first option is full-width, where the grid fills the entire screen width, making items easy to see and tap. The second option is a horizontally scrollable grid, where item sizes remain fixed and users can swipe left or right to explore more content. Both options work well on mobile, and you can choose the one that best fits your content and use case.
| On desktop, swipe gestures are not common, so the Grid Menu is displayed with a fixed 100% width. By combining the Desktop/mobile display ratio with device-specific size settings (using the format 8 | 16, meaning 8 on mobile and 16 on desktop), you can ensure the grid looks clear, full, and well-proportioned on larger screens. |
This approach keeps your Grid Menu consistent across mobile and desktop, easy to manage, and simple to update—without maintaining two separate menu systems. You only need to design the Grid Menu once on mobile, and Navi+ takes care of the rest.