The Mobile Bottom Bar adds a fixed navigation bar to the bottom of the screen on mobile devices, giving visitors quick, one-tap access to the pages and actions they use most, like Menu, Search, Cart or Wishlist. It works like the tab bar in a native mobile app and stays in view while the page scrolls.
Enabling the Mobile Bottom Bar
- Go to your Theme Settings (Rey theme → Settings).
- Open the General panel and scroll to the Site Elements group.
- Click Mobile Bottom Bar.
- Turn on Enable Mobile Bottom Bar.
The bar is hidden by default, so nothing changes on your site until you enable it. Once on, the rest of the options below appear.
If you do not see the Mobile Bottom Bar section, make sure the module is active in Theme Settings → Modules.
Choosing a layout
The Layout option controls how the bar looks:
- Floating (frosted glass) – the default. A detached, translucent pill that hovers a little above the bottom edge, with a soft blur effect, similar to the native iOS tab bar. The currently active page is highlighted automatically.
- Classic – a solid, full-width bar attached to the bottom edge of the screen.
Adding and arranging elements
Under Bar Elements you decide exactly what the bar contains.
- Click Add Element to add a new item.
- Pick what each item is from the Element dropdown.
- Drag the rows by the handle to change their order.
- Remove any item you do not need.
By default the bar comes with five elements: Home, Menu, Search, Wishlist and Cart.
Available elements
| Element | What it does | Requires |
|---|---|---|
| Home | Links to your homepage. | – |
| Shop | Links to your main shop page. | WooCommerce |
| Menu | Opens your mobile menu. | A mobile menu in the header |
| Filter | Opens the product filters panel and shows a badge with the number of active filters. Only appears on shop and product category pages. | WooCommerce |
| Search | Opens the site search. | The header search |
| Account | Links to the My Account page. | WooCommerce |
| Cart | Opens the cart. Shows a live item count and, where available, opens the slide-out mini cart instead of the cart page. | WooCommerce |
| Wishlist | Links to the wishlist, with a live item count. | WooCommerce |
| Compare | Links to the compare page, with a live item count. | WooCommerce |
| Custom | Your own element: a label, an icon, an optional badge and a link to any page. | – |
A few things happen automatically so the bar always makes sense:
- Elements that need WooCommerce are skipped if WooCommerce is not active.
- Menu, Search and Filter hide themselves on pages where that control is not available.
- Cart, Account and Wishlist reuse the same icon style you already chose for your header, so the bar matches the rest of your site.
- Counts for Cart, Wishlist, Compare and Filter update instantly as visitors add items or apply filters, with no page reload.
Adding a Custom element
Choose Custom in an element’s dropdown and four extra fields appear for that row:
- Label – the text shown under the icon.
- Link (URL) – where the element points, for example a promotions page.
- Badge – an optional tiny badge, for example
20%. - Icon (svg) – upload your own SVG icon for this element.
Display options
- Show text labels – shows a short text label under each icon. Turn this off for an icons-only bar. On by default.
- Show on – choose where the bar appears:
- Mobile only (up to 767px)
- Mobile & tablet (up to 1024px) (the default)
- Hide when scrolling down – hides the bar while the visitor scrolls down and brings it back when they scroll up, freeing up screen space. Off by default.
Colors
Fine-tune the bar’s appearance with four color options. Each one is optional, and leaving it empty keeps the theme default.
- Background color – the background of the bar.
- Items color – the color of the icons and labels.
- Count color – the color of the count badges (Cart, Wishlist, Compare, Filter). The highlight on the active item is applied automatically and does not use this color.
- Badge color – the background of the Custom element’s badge, so it stands out. Falls back to the Count color if left empty.
Good to know
- The page automatically reserves space at the bottom, so the fixed bar never overlaps your content.
- The bar is built for touch: large tap targets, clear icons and optional labels.
- There is no limit on how many elements you add, but for the best experience on small screens we recommend keeping it to around five.