Navigation Items

Navigation Items are the individual tappable elements in the Bottom Navigation. Each item has an icon, optional label, and leads to a specific action. Tap on an item in the preview to open the Smart Panel with four tabs.

---

Icon & Label Tab

The Icon & Label tab controls the visual appearance of the item.

Icon

Select Icon

Path: Icon & Label → Icon → Icon

Tap on the icon preview to open the icon picker.

Aspect	Details
Icon Library	Material Icons
Search	Search by icon name
Categories	Browse by categories
Preview	Shows the icon in current color and size

Icon Size

Path: Icon & Label → Icon → Icon Size

Aspect	Details
Range	16 - 48 px
Steps	1 px
Default	24 px
Control	Drag slider

Tip

Larger icons (28-32 px) work well when you hide labels. Smaller icons (20-24 px) work better with labels.

---

Label

Show Label

Path: Icon & Label → Label → Show Label

Aspect	Details
Type	Toggle (On/Off)
Default	On
Effect	Shows/hides the text below the icon

Label Text

Path: Icon & Label → Label → Label Text

Only visible when “Show Label” is activated.

Aspect	Details
Type	Multilingual text field
Languages	German, English (depending on app configuration)
Examples	Home, Settings, Profile

Multilingual

Tap on the language icon to switch between languages. Each language can have its own text.

Label Visibility

Path: Icon & Label → Label → Label Visibility

When the label is displayed:

Mode	Description
Always	Label is always visible
Only When Selected	Label appears only for the active item

---

Font Settings

Only visible when “Show Label” is activated.

Font Size

Path: Icon & Label → Label → Font Size

Aspect	Details
Range	8 - 20 px
Steps	1 px
Default	12 px

Font Weight

Path: Icon & Label → Label → Font Weight

Weight	Designation
100	Thin
200	Extra Light
300	Light
400	Normal (Default)
500	Medium
600	Semi Bold
700	Bold
800	Extra Bold
900	Black

Letter Spacing

Path: Icon & Label → Label → Letter Spacing

Aspect	Details
Range	-2 to +4 px
Steps	0.1 px
Default	0 px

Font Family

Path: Icon & Label → Label → Font Family

Aspect	Details
Default	Roboto
Picker	Browse available fonts
Search	Search by font name
Preview	Shows font in real-time

Font Style

Path: Icon & Label → Label → Font Style

Style	Description
Normal	Upright font (default)
Italic	Italic font

---

Colors Tab

The Colors tab controls all color values of the item for active and inactive state.

Light/Dark Mode Toggle

Path: Colors Tab - top

Switch between Light Mode and Dark Mode editing. All color settings refer to the selected mode.

---

Icon Colors

Active Icon Color

Path: Colors → Icon Colors → Active Icon Color

Color of the icon when this item is selected.

Aspect	Details
Default Light	Primary color from theme
Default Dark	Primary color from theme (Dark)
Color Picker	Tap on color for picker
Reset	Resets to theme color

Inactive Icon Color

Path: Colors → Icon Colors → Inactive Icon Color

Color of the icon when this item is not selected.

Aspect	Details
Default Light	Secondary text color from theme
Default Dark	Secondary text color from theme (Dark)

---

Label Colors

Only visible when “Show Label” is activated.

Active Label Color

Path: Colors → Label Colors → Active Label Color

Text color when this item is selected.

Aspect	Details
Default	Same as Active Icon Color

Inactive Label Color

Path: Colors → Label Colors → Inactive Label Color

Text color when this item is not selected.

Aspect	Details
Default	Same as Inactive Icon Color

Consistent Colors

For a harmonious design, icon and label colors should match in the same state.

---

Container Tab

The Container tab controls the area around the icon and label of an item.

Light/Dark Mode Toggle

Path: Container Tab - top

Switch between Light Mode and Dark Mode editing.

---

Background

Active Background

Path: Container → Background → Active Background

Background color of the container when this item is selected.

Aspect	Details
Default	Primary color with 10% opacity
Application	Highlighting the active item

Tip

A lightly colored background in the active state enhances visual feedback when tapping.

Inactive Background

Path: Container → Background → Inactive Background

Background color of the container when this item is not selected.

Aspect	Details
Default	Transparent (0% opacity)

---

Shape & Size

Container Shape

Path: Container → Shape & Size → Container Shape

Shape	Description
Rectangle	Square container (default)
Circle	Round container
Pill	Rounded container (stadium shape)

Corner Radius

Path: Container → Shape & Size → Corner Radius

Rounding of corners (only relevant for rectangle shape).

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

Horizontal Padding

Path: Container → Shape & Size → Horizontal Padding

Lateral inner spacing of the container.

Aspect	Details
Range	0 - 40 px
Steps	1 px
Default	12 px

Vertical Padding

Path: Container → Shape & Size → Vertical Padding

Top and bottom inner spacing of the container.

Aspect	Details
Range	0 - 30 px
Steps	1 px
Default	8 px

Min. Width

Path: Container → Shape & Size → Min. Width

Minimum width of the container.

Aspect	Details
Range	40 - 120 px
Steps	1 px
Default	60 px

Min. Height

Path: Container → Shape & Size → Min. Height

Minimum height of the container.

Aspect	Details
Range	30 - 80 px
Steps	1 px
Default	40 px

---

Border

Show Border

Path: Container → Border → Show Border

Aspect	Details
Type	Toggle (On/Off)
Default	Off
Effect	Shows a border around the container

Border Width

Path: Container → Border → Border Width

Only visible when “Show Border” is activated.

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

Active Border

Path: Container → Border → Active Border

Border color when this item is selected.

Aspect	Details
Default	Primary color from theme

Inactive Border

Path: Container → Border → Inactive Border

Border color when this item is not selected.

Aspect	Details
Default	Secondary text color with 30% opacity

---

Behavior Tab

The Behavior tab controls what happens when the item is tapped.

Action & Target

Path: Behavior → Action & Target

The Action Target Picker allows configuration of the item action.

Action Type

Type	Description
Open Page	Navigates to a specific route
Open Dialog	Shows a modal dialog
Show Menu	Opens a context menu

Target Route

Only visible for action type “Open Page”.

Aspect	Details
Selection	List of available routes
Categories	Common routes, modules, custom
Input	Or manually enter route

Common routes:

Route	Description
/home	Home page
/feed	Feed/Timeline
/profile	User profile
/settings	Settings
/search	Search
/chat	Chat/Messages
/favorites	Favorites

Edit Dialog

Only visible for action type “Open Dialog”. Opens the dialog editor.

Edit Menu

Only visible for action type “Show Menu”. Opens the menu editor.

---

Item Management

Add New Item

1. Tap Add Element in the toolbar
2. Select Navigation Item
3. The new item appears in the navigation
4. Tap on it to configure

Duplicate Item

1. Long press the item
2. Select Duplicate in the context menu
3. A copy appears next to the original

Delete Item

1. Long press the item
2. Select Delete in the context menu
3. Confirm deletion

Caution

Deleted items cannot be restored. Save beforehand if you’re unsure.

Sort Items

1. Activate Reorder Mode in the toolbar
2. Press and hold an item and drag it
3. Release at the desired position
4. Exit reorder mode

---

Tips

Icon Consistency

Use icons from the same icon family for a uniform appearance. Material Icons offer many variants (Filled, Outlined, Rounded, Sharp).

Label Visibility

“Only When Selected” saves space and focuses attention on the active item. Use it with 5 items or in tight spaces.

Container Styling

The pill shape with colored background in the active state is a modern Material You style. Combine it with a matching indicator type.

Active/Inactive Contrasts

Ensure that the difference between active and inactive state is clearly recognizable - both in colors and opacity.

---

Back to Overview

Bottom Navigation Overview Back to main page

Configure Background Customize navigation background

Set Up FAB Configure Floating Action Button