---
title: Bottom Navigation React component
components: BottomNavigation, BottomNavigationAction
---

# ボトムナビゲーション

<p class="description">ボトムナビゲーションを使用すると、アプリ内の主要な目的地間を移動できます。</p>

[ボトムナビゲーション](https://material.io/design/components/bottom-navigation.html) バーは、画面下部に3〜5つの目的地を表示します。 各目的地は、アイコンとオプションのテキストラベルで表されます。 ボトムナビゲーションアイコンをタップすると、そのアイコンに関連付けられている最上位のナビゲーション先に移動します。 各目的地は、アイコンとオプションのテキストラベルで表されます。 ボトムナビゲーションアイコンをタップすると、そのアイコンに関連付けられている最上位のナビゲーション先に移動します。

## ボトムナビゲーション

**3** アクションしかない場合は、アイコンとテキストラベルの両方を常に表示します。

{{"demo": "pages/components/bottom-navigation/SimpleBottomNavigation.js", "bg": true}}

## ラベルなしのボトムナビゲーション

**4** または **5** アクションがある場合は、非アクティブビューをアイコンとしてのみ表示します。

{{"demo": "pages/components/bottom-navigation/LabelBottomNavigation.js", "bg": true}}