React Reference > Tabbar Component

<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.

Usage 

<Page>
    <Tabbar
      onPreChange={({index}) => this.setState(index)}
      onPostChange={() => console.log('postChange')}
      onReactive={() => console.log('postChange')}
      position='bottom'
      index={this.state.index}
      renderTabs={(activeIndex, tabbar) => [
        {
          content: <TabPage title="Home" active={activeIndex === 0} tabbar={tabbar} />,
          tab: <Tab label="Home" icon="md-home" />
        },
        {
          content: <TabPage title="Settings" active={activeIndex === 1} tabbar={tabbar} />,
          tab: <Tab label="Settings" icon="md-settings" />
        }]
      }
    />
  </Page>

Props

[improve this]
Name Type Description
activeIndex number The index of the tab to highlight. Optional.
index number DEPRECATED! Use activeIndex instead. Optional.
renderTabs func 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 Enable 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 enum 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 func Called just before the tab is changed. Optional.
onPostChange func Called just after the tab is changed. Optional.
onReactive func Called if the already open tab is tapped again. Optional.
onSwipe func Hook called whenever the user slides the tabbar. It gets a decimal index and an animationOptions object as arguments. Optional.
visible bool If true, the tabbar is not shown on the screen. Otherwise, the tabbar is shown. Optional.
visible bool DEPRECATED! Use hideTabs instead. Optional.
modifier string The appearance of the tabbar. Optional.

Preset Modifiers

[improve this]
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.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord 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.