TabBar

Live demo

How to use it

Bottom navigation for mobile apps, three to five destinations.

Provide items (key, label, icon), and active/onChange or defaultActive.
Active color follows the theme: lime on Graphite, ink on Glass and Paper, forest on Mineral, a yellow pill on Enamel, amber on Ember.
Items are 44px minimum touch targets and dip on press.

Don't: hide labels unless the icons are unmistakable, or put actions (like "New") in the tab bar.

In every theme

Follows the mode picked in the header.

Graphite

Glass

Paper

Mineral

Enamel

Ember

Code

React

import { TabBar } from 'enma/react';

<TabBar
  active={tab}
  onChange={setTab}
  items={[
    { key: 'home', label: 'Today', icon: 'home' },
    { key: 'train', label: 'Train', icon: 'dumbbell' },
    { key: 'stats', label: 'Stats', icon: 'chart' },
    { key: 'me', label: 'You', icon: 'user' },
  ]}
/>

This component needs JavaScript for its behaviour. Outside React, port it with the same classes and props, as described in Other platforms.

Props

`TabBarProps`

Props of TabBarProps
Prop	Type	Default
`items` required	{ key: string; label: string; icon: IconName }[]
`active`	string
`defaultActive`	string
`onChange`	(key: string) => void
`showLabels`	boolean	true
`label`	string	'Main'
`className`	string
`style`	React.CSSProperties