Creating a navbar with material-ui

Question

I'm trying to create a simple navbar with material-ui that looks like the one they use on their site. This is the code I wrote to try to replicate it:

import React from 'react'
import {AppBar, Tabs, Tab} from 'material-ui'

class Nav extends React.Component {
  render() {
    return (
      <AppBar title="My App">
        <Tabs>
          <Tab label="Item 1" />
          <Tab label="Item 2" />
          <Tab label="Item 3" />
          <Tab label="Item 4" />
        </Tabs>
      </AppBar>
    )
  }
}

React.render(<Nav />, document.body)

The problem is, the tabs are coming up very weird and clicking on the tabs have no effect whatsoever. Screenshot:

Any help would be very much appreciated.

Answer 1

Latest Update [2018]

Problem should be fixed in latest version.

Update #1 [2016]

At least, the will is there - Not all hope is lost!

Original Post

Had the same issue.

Turns out, it's a bug (#773).

But you are in luck: This PR provides a solution using CSS. It (kinda) works. Here is a screenshot:

As you can see, it looks a bit ugly, so you might want to keep fiddling with the CSS to get the tabs appear in the right place.

NOTE: Eight months ago, the PR got rejected. Apparently, displaying Tabs in AppBar is not high-priority, so, the hackfix solution is all you got at the moment!

Oh the agony of using pre-release libraries!

Answer 2

I think Kabir's answer is a good start and I would also wrap the <Tabs> in a <ToolbarGroup > as the AppBar is subset of toolbars.

e.g.

iconElementRight={<ToolbarGroup >{myTabs}</ToolbarGroup>}

see: http://www.material-ui.com/#/components/toolbar

Answer 3

A little late to the party, but a solution that has worked for me. FYI, this is a React/Redux app with a Rails backend.

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router'
import AppBar from 'material-ui/AppBar'
import Drawer from 'material-ui/Drawer'
import MenuItem from 'material-ui/MenuItem'
import { getBasename } from '../config/environment'

export default class Navbar extends Component {
  constructor(props) {
    super(props)
    this.state = {open: false}
    this.displayNavbar = this.displayNavbar.bind(this)
  }

  toggleDrawer = () => this.setState({ open: !this.state.open })

  authenticatedNavbar = () => {
    return (
      <div>
        <AppBar
          iconElementRight={
            <MenuItem
              containerElement={<Link to={getBasename() + 'login'} />}
              onTouchTap={() => {this.props.onLogoutClick()}}
              primaryText="Logout"
            />
          }
          onLeftIconButtonTouchTap={() => this.toggleDrawer()}
          title="Your_app"
        />
        <Drawer
          docked={false}
          onRequestChange={(open) => this.setState({open})}
          open={this.state.open}
        >
          <MenuItem
            containerElement={<Link to={getBasename() + 'home'} />}
            onTouchTap={() => { this.toggleDrawer() }}
            primaryText="Home"
          />
          <MenuItem
            containerElement={<Link to={getBasename() + 'some_component'} />}
            onTouchTap={() => { this.toggleDrawer() }}
            primaryText="Some Component"
          />
        </Drawer>
      </div>
    )
  }

  unauthenticatedNavbar = () => {
    return (
      <div>
        <AppBar
          iconElementRight={
            <MenuItem
              containerElement={<Link to={getBasename() + 'login'} />}
              primaryText="Login"
            />
          }
          showMenuIconButton={false}
          title="Your_app"
        />
      </div>
    )
  }

Then some other logic to show the appropriate AppBar according to the users state of authentication.

I don't really think that tabs are meant to be part of the App Bar. The Material spec shows them as a secondary toolbar.

Answer 4

Have you used the react-tap-event-plugin? According to https://github.com/callemall/material-ui/issues/288 it's needed.

Answer 5

Besides the CSS hack, I found out that you can use HTML Entities as a hack to split the tabs text. You can add   to the beginning and ending of the tab labels and you have your space.

It makes the label string ugly but if you don't care that much it does the work pretty well, and it also allow you to add as many spaces as you wish.

Here is the updated code:

import React from 'react'
import {AppBar, Tabs, Tab} from 'material-ui'

class Nav extends React.Component {
  render() {
    return (
      <AppBar title="My App">
        <Tabs>
          <Tab label="&nbsp;Item 1&nbsp;" />
          <Tab label="&nbsp;Item 2&nbsp;" />
          <Tab label="&nbsp;Item 3&nbsp;" />
          <Tab label="&nbsp;Item 4&nbsp;" />
        </Tabs>
      </AppBar>
    )
  }
}

React.render(<Nav />, document.body)

And screenshot: Tabs with spaces

Answer 6

Did you read the Material-UI documentation?

Try passing your content as the iconElementRight prop.

ie:

render() {
    var myTabs = (
        <Tabs>
            <Tab label="item 1" />
            <Tab label="item 2" />
        </Tabs>
    );
    return <AppBar title="My App" iconElementRight={myTabs} />
}

Although, it does appear there are only 3 styles that are supported (as seen by the 3 examples in the docs). You might have to get creative with the styling, because it doesn't appear to be very flexible.

PS good luck, because since their switch to inline-styles and their own custom themes, it's pretty hard to change things or integrate other non-mui components (I was so put-off by this I created a fork that uses SASS https://www.npmjs.com/package/material-ui-with-sass)