Magento 2 Mobile Bottom Navigation: App-like Tabs for Smartphones
SKU: MOBILEBOTTOMNAV1
- tabs for home, categories, search, account and cart
- category panel as a slide-up from the catalog tree
- live cart counter, active tab highlighted
- mobile only, switchable off in checkout
Einmaliger Kauf · inkl. 12 Monate Updates · zzgl. MwSt.
Magento 2 Mobile Bottom Navigation: shop navigation like in an app
The Mironsoft Magento 2 Mobile Bottom Navigation brings a tab bar like in an app to the bottom edge of the screen: home, categories, search, account and cart. Categories open as a panel straight from your catalog tree, and the cart shows a live counter. The Magento 2 Mobile Bottom Navigation runs on Alpine.js and Tailwind, needs no jQuery and only appears on small screens.
Tab bar
Five tabs at the bottom edge, within thumb reach and with large tap targets.
Category panel
One tap opens the catalog tree as a slide-up with subcategories.
Search overlay
The search field opens over the page and the keyboard appears at once.
Cart badge
The counter updates after adding an item without reloading.
Active tab
The current page is highlighted automatically.
Fully configurable
Order, icons, labels and custom links in the admin.
Why smartphone users expect navigation at the bottom edge
Users work with apps that have tabs at the bottom of the screen every day and expect the same handling in a shop. The hamburger menu at the top left sits at the far end of thumb reach and hides the categories. Merchants therefore look for a Magento 2 Mobile Bottom Navigation that keeps the main destinations visible. The default theme does not offer that.
Building it yourself takes time: category panel, active tab, counter, safe area and keyboard all need clean solutions. The Magento 2 Mobile Bottom Navigation delivers these building blocks ready-made and configurable in the admin.
Choose tabs: home, categories, search, account and cart
In the admin you define the tabs: order, icon, label and target. By default there are home, categories, search, account and cart; you can remove tabs or replace them with custom links, such as offers or contact. The active tab is detected from the current page and highlighted in colour. Labels are translatable per store view, and the tap targets stay large even with longer texts.
- Order, icon and label freely selectable
- Custom links instead of default tabs possible
- Active tab detected automatically
Category panel as a slide-up straight from the catalog tree
The Categories tab opens a panel that slides in from below and shows the categories from your catalog tree. You choose the root category and the depth, and a tap on an entry expands subcategories or jumps to the page. Hidden or inactive categories do not appear. Swiping down or tapping the background closes the panel; focus handling stays intact for keyboard users.
- Root category and depth selectable
- Inactive categories are left out
- Close by swipe, tap or Esc key
Search overlay and a real-time cart counter
A tap on Search opens an overlay with a focused input so the keyboard appears without a detour. The cart tab reads the items from the Hyvä cart data and shows them as a badge; after a product is added, the number updates without reloading. When the cart is empty the badge stays hidden. If you use a search module such as the ajax search, the overlay takes over its input field.
- Overlay with an immediately focused search field
- Badge from cart data, updated live
- Empty cart without badge
Safe area, keyboard, checkout and cookie banner
On devices with a home indicator the bar respects the safe area. When the on-screen keyboard opens, the bar is hidden so it does not cover input fields. In checkout and on page types of your choice you switch it off to avoid distracting from completion. A cookie banner sits above the bar instead of behind it. The breakpoint determines from when the classic desktop navigation takes over.
- Safe area and keyboard respected
- Switchable off in checkout and on chosen page types
- Breakpoint to desktop navigation adjustable
Where the Magento 2 Mobile Bottom Navigation helps in everyday shop work
Typical situations in which the Magento 2 Mobile Bottom Navigation gets visitors to their goal faster.
Shops with a large range
Visitors jump through the category panel straight into deep levels without opening the main menu.
Mobile repeat purchases
With the Magento 2 Mobile Bottom Navigation, account and cart are always one tap away, which speeds up reorders.
Fashion and lifestyle
An app-like Magento 2 Mobile Bottom Navigation suits audiences who shop mostly on mobile.
Promotions and seasons
A custom tab leads to the current promotion page without restructuring the menu.
Magento 2 Mobile Bottom Navigation: hamburger menu or tabs compared
What the Magento 2 Mobile Bottom Navigation changes compared with a hamburger menu alone.
| Topic | Without the module | With Mironsoft Mobile Bottom Navigation |
|---|---|---|
| Reachability | Menu at the top, far from the thumb | Tabs at the bottom within thumb reach |
| Categories | Nested menu | Panel straight from the catalog tree |
| Cart | Visible in the header only | Badge with live counter |
| Orientation | Current page unclear | Active tab highlighted |
| Maintenance | Theme customisation | Tabs configurable in the admin |
How we set up the Magento 2 Mobile Bottom Navigation for you
The process after you place your order.
Briefing
You decide which tabs appear, which categories sit in the panel and where the bar is hidden.
Installation
We install the module and integrate the Magento 2 Mobile Bottom Navigation into your Hyvä theme, coordinated with header and footer.
Design
We adapt icons, colours, breakpoint and labels to your brand, per store view.
Testing
We check panel, search, counter, safe area, keyboard and cookie banner on common smartphones.
Handover
Your team gets an introduction to tabs, panel settings and page type rules.
Scope compared with action bar, navigation menu and sticky header
The Mironsoft Sticky Mobile Action Bar offers freely configurable actions such as call or messenger. The responsive navigation menu shapes the main navigation, the sticky header fixes the top area. The Magento 2 Mobile Bottom Navigation is the tab navigation itself: home, categories, search, account and cart in an app look.
The modules can be combined. Everything runs on Alpine.js in the Hyvä theme, with no additional library.
No download, personal setup
The Mobile Bottom Navigation is not listed here as a ready-made download file to install yourself. The purchase is a service order: after the purchase we get in touch, install the module in your shop and agree tabs and category panel together with you.
Frequently asked questions
Everything important about tabs, category panel, behaviour and how the purchase works.
How can I add navigation at the bottom edge in Magento 2?
How can I offer app-like mobile navigation in Magento 2?
Where do the categories in the panel come from?
Can I add my own tabs?
How does the cart counter work?
What happens in checkout?
Does the bar cover the keyboard or input fields?
Does the Magento 2 Mobile Bottom Navigation work with Hyvä?
How does it differ from the Sticky Mobile Action Bar?
Can I download and install the module myself?
Recently Viewed Products
Magento 2 Mobile Bottom Navigation – Mironsoft