Is it possible to set up material-ui AppBar/ToolBar to have a horizontal tab menu layout?

Question

Looking for the way to create a horizontal navigation menu for the web application using material-ui components. I'd like to start with something very similar to the menu at the react documentation website:

Since it's a quite common menu look, I was searching for the example of such configuration but was unable to found it either at material-ui docs or here at SO (there is a similar solution, but it is not exactly what's needed).

How to do this?

Answer 1

My solution for this was to place a ToolbarGroup component within AppBar's iconElementRight property.

// Defining a stateless, functional component, MyNavLinks. 
// This component contains your navigation links.

const MyNavLinks = () => (
  <ToolbarGroup>
    <FlatButton label="Dashboard" containerElement={<Link to="dashboard"/>}/>
    <FlatButton label="Settings" containerElement={<Link to="settings" />}/>
    <FlatButton label="Profile" containerElement={<Link to="profile" />}/>
  </ToolbarGroup> 
);


// Another stateless, functional component, MyAppBar. 
// Here we are setting the iconElementRight property of Material UI's AppBar 
// to the component defined above.

const MyAppbar = () => (
    <AppBar
      title="Brand"
      iconElementRight={<MyNavLinks />}
    />
);

Result: