Styles
-
Label Is recommended that Bottom navigation items should always have labels. Font size should be fixed at 12px. Avoid long lables , if necessary change padding when label wraps to 2 lines.
-
Without label A bottom navigation whiteout labels will not be accessible.
-
Label position Bottom navigation items have an option for side labels when in landscape mode or on a tablet. This helps to utilize the available horizontal space more effectively. When using this option, items in the navigation are horizontally distributed.
-
Icon Bottom navigation items should always have icons. Icons provide metaphors for quick visual reference and help to reinforce a product’s navigation. Icons also help to supplement labels, for better comprehension.
-
Background
Sizing
States
Selected
A bottom navigation item in a selected state shows that.
Disabled
A bottom navigation item in a disabled state shows that an item exists, but is not available in that circumstance. This state can be used to maintain layout continuity and to communicate that the item may become available later. Don’t disable a bottom navigation item unless absolutely necessary.
Notification badges
Bottom navigation items can be given notification badges for indicating status or important information. Be mindful of how frequently you notify users and what type of content should trigger a notification badge, to avoid causing users to ignore badges altogether.