> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stac.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# BottomNavigationBar

> Documentation for BottomNavigationBar

export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";

export const bottomNavigationBarPreviewJson = {
  "type": "defaultBottomNavigationController",
  "length": 3,
  "child": {
    "type": "scaffold",
    "appBar": {
      "type": "appBar",
      "title": {
        "type": "text",
        "data": "Bottom Navigation Screen"
      }
    },
    "body": {
      "type": "bottomNavigationView",
      "children": [{
        "type": "center",
        "child": {
          "type": "text",
          "data": "Home",
          "style": {
            "fontSize": 24
          }
        }
      }, {
        "type": "center",
        "child": {
          "type": "text",
          "data": "Search",
          "style": {
            "fontSize": 24
          }
        }
      }, {
        "type": "center",
        "child": {
          "type": "text",
          "data": "Profile",
          "style": {
            "fontSize": 24
          }
        }
      }]
    },
    "bottomNavigationBar": {
      "type": "bottomNavigationBar",
      "items": [{
        "type": "navigationBarItem",
        "label": "Home",
        "icon": {
          "type": "icon",
          "iconType": "material",
          "icon": "home"
        }
      }, {
        "type": "navigationBarItem",
        "label": "Search",
        "icon": {
          "type": "icon",
          "iconType": "material",
          "icon": "search"
        }
      }, {
        "type": "navigationBarItem",
        "label": "Profile",
        "icon": {
          "type": "icon",
          "iconType": "material",
          "icon": "account_circle"
        }
      }]
    }
  }
};
export const bottomNavigationBarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac BottomNavigationBar allows you to build a Flutter BottomNavigationBar widget using JSON.
To know more about the BottomNavigationBar widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html).

## Properties

| Property                | Type                                     | Description                                                                    |
| ----------------------- | ---------------------------------------- | ------------------------------------------------------------------------------ |
| items                   | `List<StacBottomNavigationBarItem>`      | The items to be displayed in the bottom navigation bar.                        |
| elevation               | `double`                                 | The z-coordinate at which to place this bottom navigation bar.                 |
| bottomNavigationBarType | `StacBottomNavigationBarType`            | The type of the bottom navigation bar.                                         |
| fixedColor              | `StacColor`                              | The color of the selected item when `type` is `BottomNavigationBarType.fixed`. |
| backgroundColor         | `StacColor`                              | The background color of the bottom navigation bar.                             |
| iconSize                | `double`                                 | The size of the icons in the bottom navigation bar. Defaults to `24`.          |
| selectedItemColor       | `StacColor`                              | The color of the selected item.                                                |
| unselectedItemColor     | `StacColor`                              | The color of the unselected items.                                             |
| selectedFontSize        | `double`                                 | The font size of the selected item. Defaults to `14.0`.                        |
| unselectedFontSize      | `double`                                 | The font size of the unselected items. Defaults to `12.0`.                     |
| selectedLabelStyle      | `StacTextStyle`                          | The text style of the selected item label.                                     |
| unselectedLabelStyle    | `StacTextStyle`                          | The text style of the unselected item labels.                                  |
| showSelectedLabels      | `bool`                                   | Whether to show labels for selected items.                                     |
| showUnselectedLabels    | `bool`                                   | Whether to show labels for unselected items.                                   |
| enableFeedback          | `bool`                                   | Whether to enable feedback for taps.                                           |
| landscapeLayout         | `StacBottomNavigationBarLandscapeLayout` | The layout of the bottom navigation bar in landscape mode.                     |

## DefaultBottomNavigationController

DefaultBottomNavigationController is an inherited widget that is used to share a BottomNavigationController with a BottomNavigationBar or a BottomNavigationView.

## Properties

| Property     | Type         | Description                                       |
| ------------ | ------------ | ------------------------------------------------- |
| length       | `int`        | The number of items in the bottom navigation bar. |
| initialIndex | `int`        | The initial index of the selected item.           |
| child        | `StacWidget` | The widget below this widget in the tree.         |

## BottomNavigationBarItem

The Stac BottomNavigationBarItem allows you to build a Flutter BottomNavigationBarItem using JSON.
To know more about the BottomNavigationBarItem widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/BottomNavigationBarItem-class.html).

## Properties

| Property        | Type         | Description                                                |
| --------------- | ------------ | ---------------------------------------------------------- |
| icon            | `StacWidget` | The icon to display in the bottom navigation bar item.     |
| label           | `String`     | The label to display in the bottom navigation bar item.    |
| activeIcon      | `StacWidget` | The icon to display when the item is active.               |
| backgroundColor | `StacColor`  | The background color of the bottom navigation bar item.    |
| tooltip         | `String`     | The tooltip text to display when the item is long-pressed. |

## BottomNavigationView

A page view that displays the widget which corresponds to the currently selected bottom navigation item.

## Properties

| Property | Type               | Description                                |
| -------- | ------------------ | ------------------------------------------ |
| children | `List<StacWidget>` | The widgets below this widget in the tree. |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacDefaultBottomNavigationController(
      length: 3,
      child: StacScaffold(
        appBar: StacAppBar(
          title: StacText(data: 'Bottom Navigation Screen'),
        ),
        body: StacBottomNavigationView(
          children: [
            StacCenter(
              child: StacText(
                data: 'Home',
                style: StacTextStyle(fontSize: 24),
              ),
            ),
            StacCenter(
              child: StacText(
                data: 'Search',
                style: StacTextStyle(fontSize: 24),
              ),
            ),
            StacCenter(
              child: StacText(
                data: 'Profile',
                style: StacTextStyle(fontSize: 24),
              ),
            ),
          ],
        ),
        bottomNavigationBar: StacBottomNavigationBar(
          items: [
            StacBottomNavigationBarItem(
              label: 'Home',
              icon: StacIcon(iconType: 'material', icon: 'home'),
            ),
            StacBottomNavigationBarItem(
              label: 'Search',
              icon: StacIcon(iconType: 'material', icon: 'search'),
            ),
            StacBottomNavigationBarItem(
              label: 'Profile',
              icon: StacIcon(iconType: 'material', icon: 'account_circle'),
            ),
          ],
        ),
      ),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "defaultBottomNavigationController",
      "length": 3,
      "child": {
        "type": "scaffold",
        "appBar": {
          "type": "appBar",
          "title": {
            "type": "text",
            "data": "Bottom Navigation Screen"
          }
        },
        "body": {
          "type": "bottomNavigationView",
          "children": [
            {
              "type": "center",
              "child": {
                "type": "text",
                "data": "Home",
                "style": {
                  "fontSize": 24
                }
              }
            },
            {
              "type": "center",
              "child": {
                "type": "text",
                "data": "Search",
                "style": {
                  "fontSize": 24
                }
              }
            },
            {
              "type": "center",
              "child": {
                "type": "text",
                "data": "Profile",
                "style": {
                  "fontSize": 24
                }
              }
            }
          ]
        },
        "bottomNavigationBar": {
          "type": "bottomNavigationBar",
          "items": [
            {
              "type": "navigationBarItem",
              "label": "Home",
              "icon": {
                "type": "icon",
                "iconType": "material",
                "icon": "home"
              }
            },
            {
              "type": "navigationBarItem",
              "label": "Search",
              "icon": {
                "type": "icon",
                "iconType": "material",
                "icon": "search"
              }
            },
            {
              "type": "navigationBarItem",
              "label": "Profile",
              "icon": {
                "type": "icon",
                "iconType": "material",
                "icon": "account_circle"
              }
            }
          ]
        }
      }
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={bottomNavigationBarPreviewSrc}
        title="Stac Playground"
        className="w-full rounded-xl border-0"
        style={{ height: "640px" }}
        loading="lazy"
        onLoad={(event) => {
      const iframe = event.currentTarget;
      const targetOrigin = PLAYGROUND_BASE_URL;
      const message = {
        type: "stac-preview-json",
        payload: bottomNavigationBarPreviewJson
      };

      let attempts = 0;
      const maxAttempts = 12;
      const interval = setInterval(() => {
        iframe.contentWindow?.postMessage(message, targetOrigin);
        attempts += 1;

        if (attempts >= maxAttempts) {
          clearInterval(interval);
        }
      }, 250);
    }}
      />
    </Frame>
  </Tab>
</Tabs>