Bottom Navigation

The BottomNavigation component provides a simple way to navigate between different views while providing common UI for both iOS and Android platforms. The recommended scenario suitable for BottomNavigation is a high level navigation with 3 to 5 tabs each with separate function. For additional information and details about bottom navigation refer to the Material Design guidelines.

Note: NativeScript 6 introduced two new UI components called BottomNavigation and Tabs. The idea behind them is to provide more control when building tab based UI, while powering the CSS styling, the icon font support and other specific functionalities. Prior to NativeScript 6, we had the TabView component which had top and bottom implementations with different behavoirs for the different platofrms and some styling limitations. With BottomNavigaiton and Tabs coomponents available, the TabView can be considered obsolete.

The BottomNavigation component roundup:

Component Primary Objectives:

• Used for High Level navigation.
• Good for UX structure with 3 to 5 different options.
• Greater control over styling (copared to TabVIew).

Limitations

• No navigation transitions.
• No navigation gestures (e.g., swipe to navigate).
• No content preloading.

Usage

The BottomNavigation component contains two sub-components:

• The TabStrip which defines and rendres the bottom bar and its TabStripItem components.
• Multiple TabContentItem components which total number should be equal to the number of the tabs (TabStripItem components). Each TabContentItem acts as a container for your tab content.

<BottomNavigation selectedIndex="1">

    <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
    <TabStrip>
        <TabStripItem>
            <Label text="Home"></Label>
            <Image src="font://&#xf015;" class="fas"></Image>
        </TabStripItem>

        <TabStripItem class="special">
            <Label text="Account"></Label>
            <Image src="font://&#xf007;" class="fas"></Image>
        </TabStripItem>

        <!-- 
            The below two conventions (shorthand vs exteded syntax) are identical in UI outcome but the second one will provide you with greater control over your TabStripItem UI.
            When using the first shorthand syntax then your Icon Font CSS class should be set on the BottomNavigation element.
         -->
        <!-- <TabStripItem title="Search" iconSource="font://&#xf00e;"></TabStripItem> -->
        <TabStripItem class="special">
            <Label text="Search"></Label>
            <Image src="font://&#xf00e;" class="fas"></Image>
        </TabStripItem>
    </TabStrip>

    <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
    <TabContentItem>
        <GridLayout>
            <Label text="Home Page" class="h2 text-center"></Label>
        </GridLayout>
    </TabContentItem>
    <TabContentItem>
        <GridLayout>
            <Label text="Account Page" class="h2 text-center"></Label>
        </GridLayout>
    </TabContentItem>
    <TabContentItem>
        <GridLayout>
            <Label text="Search Page" class="h2 text-center"></Label>
        </GridLayout>
    </TabContentItem>

</BottomNavigation>

Note: The number of TabStripItem components must be equal to the number of tabContentItem components.

Improve this document

Demo Source

Styling

<!-- BottomNavigation supports the CSS properties `background-color` and `color` -->
<BottomNavigation selectedIndex="1" class="bottom-nav">

    <!-- TabStripItem supports the CSS pseudo selector :active (see theming-page.css) -->
    <TabStrip>
        <TabStripItem>
            <Label text="Home"></Label>
            <Image src="font://&#xf015;" class="fas t-36"></Image>
        </TabStripItem>
        <TabStripItem>
            <Label text="Account"></Label>
            <Image src="font://&#xf007;" class="fas t-36"></Image>
        </TabStripItem>
        <TabStripItem>
            <Label text="Search"></Label>
            <Image src="font://&#xf00e;" class="fas t-36"></Image>
        </TabStripItem>
    </TabStrip>

    <TabContentItem class="first-tabcontent">
        <GridLayout>
            <Label text="Home Page" horizontalAlignment="center" verticalAlignment="middle"/>
        </GridLayout>
    </TabContentItem>
    <TabContentItem class="second-tabcontent">
        <GridLayout>
            <Label text="Account Page" horizontalAlignment="center" verticalAlignment="middle"/>
        </GridLayout>
    </TabContentItem>
    <TabContentItem class="third-tabcontent">
        <GridLayout>
            <Label text="Search Page" horizontalAlignment="center" verticalAlignment="middle"/>
        </GridLayout>
    </TabContentItem>

</BottomNavigation>

TabStrip {
    selected-item-color: blueviolet;
    un-selected-item-color: brown;
    highlight-color: gold;
}

TabContentItem.first-tabcontent {
    background-color: seashell;
    color: olive;
}
TabContentItem.second-tabcontent {
    background-color: slategray;
    color: aquamarine;
}
TabContentItem.third-tabcontent {
    background-color: blueviolet;
    color: antiquewhite;
}

.fas {
    font-family: "Font Awesome 5 Free", "fa-solid-900";
    font-weight: 900;
}

.t-36 {
    font-size: 36;
}

Improve this document

Demo Source

Properties

BottomNavigation Properties

TabStrip Properties

TabStripItem Properties

Events

BottomNavigation Events

TabStrip Events

TabStripItem Events

API References

Native Component