<Tabbar />

Component to display a tabbar on either the top or the bottom of a page. To define the tabs and the content the property renderTabs need to be implemented, that returns an array of tabs and their content. See the example for specifics.

Tutorial

Tabbar

The Tabbar component is used to add tab navigation to an app. It is a very common navigation pattern in mobile apps.

Every tab is defined by one Page component and one Tab component. The Tab component displays the actual tab and the Page component will be displayed when the tab is tapped.

The Tabbar component has a index property which is used to specify the page that is currently visible. To handle changing tabs by user input, the property onPreChange should be implemented.

<Ons.Tabbar
  index={this.state.index}
  onPreChange={(event) =>
    {
      if (event.index != index) {
        this.setState({index: event.index});
      }
    }
  }
  renderTabs={this.renderTabs}
/>

There is also a renderTabs property that should be set to a function that returns an array of objects with the keys content and tab:

{
  content: <Page />,
  tab: <Tab />
}

Every tab has, by default, the same width. 50% with two tabs, 25% with four tabs and so on. To allow tabs grow depending on their content (i.e. shorter/ longer labels), use the autogrow modifier in Tabbar component. Optionally, max-width CSS property can be specified to set the width of the tab (for each Tab component).

The Tab component

There are two ways to define a tab. Either the tab label can be put as a child of the Tab component or the label and icon props can be used to specify its appearance.

Swipes and Animations

By default, the tab bar will slide from one page to another on tab click. Use animation='none' prop to have an instant change.

swipeable={true} prop can be used to enable this functionality. It can be toggled to allow or prevent swipes at different moments of the app.

These props can be combined to have a tab bar with instant changes that can also be swiped:

<Tabbar swipeable={true} animation='none' ... />

For iOS, tabBorder prop can be included to show a tab border that updates position during swipe (this is always default on Android).

Props

Name Type Default Value Description
index number
0
The index of the tab to highlight. Optional.
renderTabs function Function that returns an array of objects with the keys content and tab. Required.
position string Tabbar’s position. Available values are "bottom" and "top". Use "auto" to choose position depending on platform (iOS bottom, Android top). Optional.
swipeable bool Ennable swipe interaction. Optional.
ignoreEdgeWidth number Distance in pixels from both edges. Swiping on these areas will prioritize parent components such as Splitter or Navigator. Optional.
animation string If this attribute is set to "none" the transitions will not be animated. Optional.
animationOptions object Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}. Optional.
tabBorder bool If true, the tabs show a dynamic bottom border. Only works for iOS since the border is always visible in Material Design. Optional.
onPreChange function Called just before the tab is changed. Optional.
onPostChange function Called just after the tab is changed. Optional.
onReactive function Called if the already open tab is tapped again. Optional.
onSwipe function Hook called whenever the user slides the tabbar. It gets a decimal index and an animationOptions object as arguments. Optional.

Preset Modifiers

Name Description
material A tabbar in Material Design.
autogrow Tabs automatically grow depending on their content instead of having a fixed width.
top-border Shows a static border-bottom in tabs for iOS top tabbars.

Discussion

Need Help?

If you have any questions, use our Community Forum or talk to us via Gitter chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.