Background

The background of the Bottom Navigation includes all visual and behavioral settings of the navigation bar itself. Tap on the background of the navigation (the area between items) to open the Smart Panel with four tabs.

Style Tab

The Style tab controls the visual appearance of the navigation bar.

Light/Dark Mode Toggle

Path: Style Tab - top

At the top of the panel, you’ll find a toggle to switch between Light Mode and Dark Mode editing. All color settings in this tab refer to the currently selected mode.

Colors

Background Color

Path: Style → Colors → Background Color

The main color of the navigation bar. When gradient is active, this color is overridden by the gradient.

Aspect	Details
Default Light	White (#FFFFFF)
Default Dark	Dark Gray (#1E1E1E)
Color Picker	Tap on the color to open the picker
Reset	Resets to theme default color

Opacity

Path: Style → Colors → Opacity

Controls the transparency of the background.

Aspect	Details
Range	0% - 100%
Steps	5% per step
Default	100% (fully opaque)
Control	Drag slider

Gradient

Path: Style → Gradient

Activate a gradient instead of a solid background color.

Use Gradient

Aspect	Details
Type	Toggle (On/Off)
Default	Off
Effect	Replaces background color with gradient

Gradient Type

Path: Style → Gradient → Gradient Type

Type	Description
Linear	Straight color transition from start to end
Radial	Circular color transition from center outward
Sweep	Fan-shaped color transition around a center point

Gradient Colors

Define any number of color stops for your gradient:

Action	Description
Add Color	Tap + to create a new color stop
Change Color	Tap on a color stop to select the color
Change Position	Drag the color stop along the bar (0.0 - 1.0)
Remove Color	Swipe away the color stop or tap X

Gradient Direction (Linear only)

Path: Style → Gradient → Direction

Setting	Description
Start	Start point of the gradient (e.g., topCenter)
End	End point of the gradient (e.g., bottomCenter)

Available positions:

topLeft, topCenter, topRight
centerLeft, center, centerRight
bottomLeft, bottomCenter, bottomRight

Tile Mode

Path: Style → Gradient → Tile Mode

Determines what happens when the gradient doesn’t fill the entire area:

Mode	Description
Clamp	Last color is continued
Repeated	Gradient is repeated
Mirror	Gradient is mirrored repeatedly
Decal	Transparency outside the area

Border

Border Width

Path: Style → Border → Border Width

The thickness of the top edge of the navigation.

Aspect	Details
Range	0 - 5 px
Steps	0.5 px
Default	0 px (no border)
Control	Drag slider

Border Color

Path: Style → Border → Border Color

The color of the top edge. Only visible when border width > 0.

Aspect	Details
Default Light	Light Gray (#E0E0E0)
Default Dark	Dark Gray (#424242)

Corner Radius

Path: Style → Border → Corner Radius

Rounds the upper corners of the navigation.

Aspect	Details
Range	0 - 50 px
Steps	1 px
Default	0 px (square)
Effect	Applies to both upper corners simultaneously

Effects

Elevation (Shadow)

Path: Style → Effects → Elevation (Shadow)

The elevation determines the shadow cast of the navigation.

Aspect	Details
Range	0 - 24
Steps	1
Default	8
Effect	Higher values = stronger shadow

Glassmorphism

Path: Style → Effects → Glassmorphism

Activates a modern blur effect (glassmorphism).

Aspect	Details
Type	Toggle (On/Off)
Default	Off
Effect	Background blur for modern look

Blur Intensity

Path: Style → Effects → Blur Intensity

Only visible when glassmorphism is activated.

Aspect	Details
Range	0 - 30
Steps	1
Default	0
Effect	Higher values = stronger blur

Layout Tab

The Layout tab controls dimensions and positioning of the navigation.

Dimensions

Height

Path: Layout → Dimensions → Height

The total height of the navigation bar.

Aspect	Details
Range	40 - 100 px
Steps	1 px
Default	60 px
Control	Drag slider

Padding

Path: Layout → Padding

The distance between the edge of the navigation and the content.

Padding Top

Aspect	Details
Range	0 - 32 px
Default	8 px

Padding Bottom

Aspect	Details
Range	0 - 32 px
Default	8 px

Horizontal Padding

Aspect	Details
Range	0 - 32 px
Default	8 px
Effect	Applies to left and right simultaneously

Item Layout

Item Alignment

Path: Layout → Item Layout → Item Alignment

Determines how items are distributed horizontally.

Alignment	Description
Start	Items at the left edge
Center	Items centered
End	Items at the right edge
Between	Equal space between items, no edge spacing
Evenly	Equal space everywhere (default)
Around	Equal space, half as much at the edge

Item Spacing

Path: Layout → Item Layout → Item Spacing

Additional spacing between items.

Aspect	Details
Range	0 - 32 px
Steps	1 px
Default	0 px

Floating Mode

Path: Layout → Floating → Floating Navigation

Detaches the navigation from the bottom edge of the screen.

Aspect	Details
Type	Toggle (On/Off)
Default	Off
Effect	Navigation floats above content

Bottom Spacing

Path: Layout → Floating → Bottom Spacing

Only visible when floating mode is activated.

Aspect	Details
Range	0 - 40 px
Steps	1 px
Default	0 px
Effect	Distance from screen edge

Indicator Tab

The indicator shows which item is currently active.

Indicator Type

Path: Indicator → Indicator Type → Indicator Type

Type	Description
None	No visual indicator
Dot	Small round dot
Line	Horizontal line
Background	Colored background behind the active item

Indicator Position

Path: Indicator → Indicator Type → Position

Only visible for types “Dot” and “Line”.

Position	Description
Top	Indicator appears above the item
Bottom	Indicator appears below the item

Indicator Style

Only visible when an indicator type is selected (not “None”).

Light/Dark Mode Toggle

Path: Indicator → Indicator Style - top

Switch between Light and Dark Mode colors.

Indicator Color

Path: Indicator → Indicator Style → Indicator Color

Aspect	Details
Default	Primary color from theme
Color Picker	Tap on color to open picker

Indicator Size (Dot only)

Path: Indicator → Indicator Style → Indicator Size

Diameter of the dot.

Aspect	Details
Range	2 - 16 px
Steps	1 px
Default	4 px

Width (Line only)

Path: Indicator → Indicator Style → Width

Horizontal extent of the line.

Aspect	Details
Range	4 - 60 px
Steps	1 px
Default	8 px

Height (Line only)

Path: Indicator → Indicator Style → Height

Vertical extent (thickness) of the line.

Aspect	Details
Range	1 - 10 px
Steps	1 px
Default	3 px

Rounding (Line and Background)

Path: Indicator → Indicator Style → Rounding

Corner radius of the indicator.

Aspect	Details
Range	0 - 50 px
Steps	1 px
Default	2 px

Indicator Animation

Path: Indicator → Indicator Animation

Only visible when an indicator type is selected.

Animation Duration

Aspect	Details
Range	100 - 500 ms
Steps	50 ms
Default	200 ms

Animation Curve

Curve	Description
linear	Constant speed
easeIn	Slow start
easeOut	Slow end
easeInOut	Slow start and end
easeInQuad/Cubic	Quadratic/cubic acceleration
bounceOut/In/InOut	Bounce effect
elasticOut/In/InOut	Elastic effect
easeInOutBack	Slight overshoot

Behavior Tab

The Behavior tab controls animations of the navigation.

Show/Hide Animation

Path: Behavior → Show/Hide Animation

Animates the appearance and disappearance of the navigation (e.g., when scrolling).

Show/Hide Duration

Aspect	Details
Range	100 - 1000 ms
Steps	50 ms
Default	300 ms

Show/Hide Curve

Curve	Description
linear	Constant speed
easeIn	Slow start
easeOut	Slow end (default)
easeInOut	Slow start and end
bounceOut	Bounce effect at end
elasticOut	Elastic effect at end

Item Selection Animation

Path: Behavior → Item Selection Animation

Animates the switching between items.

Animation Type

Choose between different animation styles:

Type	Description
linear	Steady
easeIn	Accelerating
easeOut	Decelerating
easeInOut	Accelerating and decelerating
bounce	Bouncing
elastic	Elastic

Duration

Aspect	Details
Range	100 - 500 ms
Default	200 ms

Tips

Back to Overview

Bottom Navigation Overview Back to main page

Configure Items Icons, labels and behavior of items

Set Up FAB Configure Floating Action Button