Ian/nav

@nicolashery dont merge just yet waiting for ui and product review
This is a minor comment, but I've seen it before (I do it too!), so wanted to point it out. The `render` method in components can get pretty big, and some functions don't really need to be created inside `render`. Here you could use a `toggleDropdown` method on the component (having the additional benefit of being able to re-use it elsewhere):

```javascript
render: function() {
  // ...
  <a href="" onClick={this.toggleDropdown}>
},

toggleDropdown: function(e) {
  if (e) {
    e.preventDefault();
  }
  this.setState({showDropdown: !this.state.showDropdown});
}
```

As an aside, sometimes it *is* useful to create functions inside `render`, for example when you need to "bind" it to the particular value of state or prop *at the time of render*. Ex:

```javascript
render: function() {
  return <ul>{_.map(this.state.todos, this.renderTodo)}</ul>;
},

renderTodo: function(todo) {
  var self;
  // Here I'm creating the click handler function inside the render loop
  // because it needs to be bound to that particular todo present in the state at the time of render
  var handleCompleted = function(e) {
    e.preventDefault();
    self.handleTodoCompleted.bind(null, todo.id);
  }
  return <li key={todo.id}>{todo.title}<a href="" onClick={handleCompleted}>Done</a></li>;
}
```