title: react: menu + submenu + content
body: <p>I am learning React JavaScript library.
  I want to create a simple web-app with the following layout: menu + submenu + content. I use react 15.0.2, react-router 2.4.0, babel 6.5.2 and webpack 1.13.0.</p>
  
  <p>I am able to create menu + content layout but I do not know what is the best practice to add a sub-menu section.</p>
  
  <p>My app looks like this: </p>
  
  <pre><code>Home ~ About ~ Contact ~ Profile
  
  content...
  </code></pre>
  
  <p>I want to add a sub-menu under the Profile menu item, but the first 3 menu items do not have sub-menu. So if I click on the About and Contact link then I want to see the proper content under the main menu bar. If I click on the Profile link then a submenu needs to be shown. Click on the submenu items the content needs to be displayed under the menu+submenu pairs:</p>
  
  <pre><code>Home ~ About ~ Contact ~ Profile
  
  Profile-Submenu 1 ~ Profile-Submenu 2 ~ ...
  
  content...
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>ReactDom.render(
      &lt;Router&gt;
          &lt;Route component={MainLayout}&gt;
              &lt;Route path="/" component={Home} /&gt;
              &lt;Route path="home" component={Home} /&gt;
              &lt;Route path="about" component={About} /&gt;
              &lt;Route path="contact" component={Contact} /&gt;
              &lt;Route path="profile" component={Profile} /&gt;
          &lt;/Route&gt;
      &lt;/Router&gt;,  
      document.getElementById('root')
  );
  </code></pre>
  
  <p>MainLajout.js</p>
  
  <pre><code>export default class MainLayout extends React.Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;MainMenu /&gt;
                  &lt;main&gt;{this.props.children}&lt;/main&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>MainMenu.js</p>
  
  <pre><code>export default class MainMenu extends React.Component {
      render() {
          return (
              &lt;div style={style.container}&gt;
                  &lt;Link to='/'&gt;Home&lt;/Link&gt;
                  {'\u00a0'}~{'\u00a0'}
                  &lt;Link to='/about'&gt;About&lt;/Link&gt;
                  {'\u00a0'}~{'\u00a0'}
                  &lt;Link to='/contact'&gt;Contact&lt;/Link&gt;
                  {'\u00a0'}~{'\u00a0'}
                  &lt;Link to='/profile'&gt;Profile&lt;/Link&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Could you please guide me to the right direction?</p>