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 Re         


        

Answer 1

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 (
      
        
          
          
          
          
        
      
    )
  }
}

React.render(
, document.body)

And screenshot: Tabs with spaces