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:

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