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!