6

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:

react documentation menu

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?

Community
  • 1
  • 1
Poliakoff
  • 1,592
  • 1
  • 21
  • 40
  • 1
    I believe that was made with React Bootstrap, not material-ui. Note that the React Bootstrap docs use the same nav menu: https://react-bootstrap.github.io/components.html – Jeff McCloud Nov 10 '16 at 19:29

1 Answers1

7

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: Sample Result

Farook K
  • 96
  • 2
  • 7