Serendie Design System

AboutGet StartedFoundationsComponents
© Mitsubishi Electric Corporation

Bottom Navigationボトムナビゲーション

画面下部に配置するモバイルやタブレット向けのグローバルなタブナビゲーションです。

更新 2024/11/1

サンプル

BottomNavigation内で、BottomNavigationItemを連ねて使用します。最大5タブ程度が目安です。それ以上になる場合は、Drawerなど別のナビゲーションを検討してください。

バリエーション

BottomNavigationItemにはEnable状態とActive状態があります。またNotificationBadgeを組み合わせて使用できます。

Default (Enable)

Active

With Badge (dot)

With Badge (number)