Glass Bottom Floating Bar

Content Type: Widget
Categories: Utility,Mobile

Overview

The Glass Bottom Floating Bar is a custom Mendix Native Mobile widget.Provides a modern glassmorphism-style floating bottom navigation bar.Designed for enterprise-grade mobile applications.Fully configurable using Mendix widget properties.

Documentation

1. Component Overview

  • Glass Bottom Floating Bar is a custom Mendix Native Mobile widget
  • Provides a modern glassmorphism-style floating bottom navigation bar
  • Designed for enterprise-grade mobile applications
  • Fully configurable using Mendix widget properties

 

2. Key Highlights

  • Glass-like translucent bottom bar
  • Colored glass indicator for active tab
  • Smooth scale animation on tab selection
  • Supports 1 to 4 navigation tabs
  • Dynamic theming via Mendix attributes
  • Android and iOS compatible
  • Lightweight and performance-friendly

 

3. Supported Platforms

  • Mendix Native Mobile Applications
  • Android (API 24 and above)
  • iOS (iOS 14 and above)
  • This widget is not supported for Web or PWA apps

 

4. Functional Behavior

  • Icons are displayed normally inside the bottom bar
  • When a user selects a tab:
    • A circular glass indicator appears behind the icon
    • A smooth animation highlights the active tab
    • The activeTab value is updated
  • Navigation logic can be controlled via microflows using activeTab

 

5. Widget Properties

 

5.1 General Configuration

  • Navigation Numbers
    • Type: Enumeration (1,2,3,4)
    • Description: Defines the number of tabs to display

 

5.2 Navigation State

  • ActiveTab
    • Type: EditableValue (String)
    • Expected values: "1","2","3","4"
    • Description: Stores the currently active tab and can be used for navigation logic

 

5.3 Icon Configuration

  • Logo's
    • Description: add SVG icon only.

 

6. Glass Styling Properties (Fully Dynamic)

  • BAR_GLASS_BG
    • Type: String (Color)
    • Description: Background color of the glass bottom bar
  • BAR_GLASS_BORDER
    • Type: String (Color)
    • Description: Border color of the glass bottom bar
  • GLASS_TINT
    • Type: String (Color)
    • Description: Background color of the active tab indicator
  • GLASS_TINT_BORDER
    • Type: String (Color)
    • Description: Border color of the active tab indicator

 

Note: this color should be RGB or Hex codes.

 

7.How to use for Dynamic navigation?

Place the widget on a native page and create a helper entity [NPE] with a string attribute to store the active tab selected by the user. In the Navigation Tab, define the number of navigation bars needed. In the navigation logic, call a nanoflow that takes the NPE as a parameter. This nanoflow will use the value of the ActiveTab attribute (which will be a string: "1", "2", "3", or "4") to determine the logic for opening the respective pages. When the user clicks on the first navigation bar, the ActiveTab will be set to "1". Based on this, implement a decision logic to open the corresponding page.

 

 

 

 

 

 

 

Releases