Muk Bottom Bar

Table of Contents

Create Muk Bottom Bar
Bottom Bar Notidication Badge
Muk Bottom Bar Canvas - Properties
Muk Bottom Bar - Properties

Create Muk Bottom Bar #

To create Muk Bottom Bar, right-click in the Hierarchy > Muk > Bottom Bar. You will see a new object(MukBottomBarCanvas) created in the Hierarchy. since Bottom Bar needs to be on top of all other UI and iOS may have a blur effect on the BottmBar. MukBottomBar is rendering in Screen Space – Overlay render mode.

Bottom Bar Notidication Badge #

You can show a red notification badge on the bottom bar items. To show the badge either set it in the properties setting or use the code as below.

C#


using Muk;

public class MyClass {
    [SerializeField] private MukBottomBar bottomBar;
    
    private void Start()
    {
        // Set the first item has 9 unread message
        bottomBar.SetBadge(1, 9);
    }
}

Muk Bottom Bar Canvas - Properties #

Property	Desciption	Value
Canvas Type	What kind of canvas is this. (Botton Bar) *Do not change this value, as it will affect the scene animation.
Show With Navigation	This show with the scene animation.	If you wish to show the scene with the platform scene animation. tick this option. *For the first scene, you should untick this, as it will not show anything if you ticked it.

Muk Bottom Bar - Properties #

Go to MukBottomBarCanvas > Container > MukBottomBar, You can edit all the settings in Inspector > MukBottomBar. For details go througth the properties table below.

Property	Desciption	Value
Platform Type	Which UI Platform should Muk Components display.	Device - Base on device. iOS UI for iOS device, Material design for others. iOS - iOS design. Material - Material design.
Material Version	Which Material design version to use.	Material_3 - Use the Material 3 design. Material_2 - Use the Material 2 design.
Dark Mode	Use Dark mode or light mode. You can set color for each mode in theme settings.	Dark - Dark Mode. Light - Light Mode.
SelectedIndex	The default selected index of the buttons.
Background Color Property	The background color of the bottom bar	You can choose iOS / Material Color from the drop down list, this list is from MukAppThemeData. If there's no color you like, you can tick the Override color property, then choose the color you like. If ticked, it will show two options - iOS & Material, and each option will have two options inside(Light Mode color / Dark Mode Color).
Idle color Property	The button color that's not selected?	You can choose iOS / Material Color from the drop down list, this list is from MukAppThemeData. If there's no color you like, you can tick the Override color property, then choose the color you like. If ticked, it will show two options - iOS & Material, and each option will have two options inside(Light Mode color / Dark Mode Color).
Selected color Property	The selected button color?	You can choose iOS / Material Color from the drop down list, this list is from MukAppThemeData. If there's no color you like, you can tick the Override color property, then choose the color you like. If ticked, it will show two options - iOS & Material, and each option will have two options inside(Light Mode color / Dark Mode Color).
OnSelected	UnityEvent<int> for callback when user click the button, will pass the index to the function.
BottomBarItems	Array of BottomBarItem(Max can have 5). Can set the title and icon for each button here.

Copyright © 2025 – Aitezaz Tech. All rights reserved.