stuff.jsx

class PageContent extends Component {
  render() {
    return (
      <div id="content" className="content">
        <BreadCrumbs align="left">
          <BreadCrumbs.Crumb href="#foo">foo</BreadCrumbs.Crumb>
          <BreadCrumbs.Crumb href="#bar">bar</BreadCrumbs.Crumb>
          <BreadCrumbs.Crumb href="#baz">baz</BreadCrumbs.Crumb>
        </BreadCrumbs>
      </div>
    );
  }
}

class BreadCrumbs extends Component {
  static Crumb (props){
    return ( <a href={props.href}>{_.upperFirst(props.children)}</a> )
  }

  render(){
    var ch = this.props.children
    return (
      <ol className={ 'breadcrumb pull-' + _.defaultTo( this.props.pull, 'right' ) }>
        {ch.map(function(child, idx){
          return ( ch.length === idx+1 )
            ? <li className="active">{ _.upperFirst( child.props.children ) }</li>
            : <li>{child}</li>
        })}
      </ol>
    );
  }
}