ShareCourse Outline

Build an App with React and Ampersand

2-3 Adding a layout component

next:Internal navigation
previous:Application pattern


Copy/paste content

Layout HTML

  <nav className='top-nav top-nav-light cf' role='navigation'>
    <input id='menu-toggle' className='menu-toggle' type='checkbox'/>
    <label htmlFor='menu-toggle'>Menu</label>
    <ul className='list-unstyled list-inline cf'>
      <li><a href='/repos'>Repos</a></li>
      <li className='pull-right'><a href='/logout'>Logout</a></li>
  <div className='container'>


There are a few special things about props.children to be aware of. Namely, that it will be null if missing, an array if there's more than one, or just the single element (without the array wrapper) if there's only one child.

Code Viewer