Header.js

import React from "react";
import {IndexLink, Link} from "react-router";
import "./Header.scss";
import {Navbar, Nav, NavItem, NavDropdown, MenuItem} from "react-bootstrap";
import {LinkContainer} from "react-router-bootstrap";

export default class Header extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return <Navbar className="navbar-fixed-top">
      <Navbar.Header>
        <Navbar.Brand>
          <IndexLink to='/' className="navbar-brand">Emcee</IndexLink>
        </Navbar.Brand>
      </Navbar.Header>
      <Navbar.Collapse>
        <Nav bsStyle="pills" activeKey="1">
          <LinkContainer to="/" onlyActiveOnIndex={true}>
            <NavItem>Home</NavItem>
          </LinkContainer>
          <LinkContainer to="/email">
            <NavItem>Email</NavItem>
          </LinkContainer>
          <NavDropdown title="Service" id="nav-dropdown">
            <LinkContainer to="/service">
              <MenuItem>Service</MenuItem>
            </LinkContainer>
            <LinkContainer to="servicegroup">
              <MenuItem>Service Group</MenuItem>
            </LinkContainer>
          </NavDropdown>
        </Nav>
        <Navbar.Text pullRight>
          Some text
        </Navbar.Text>
      </Navbar.Collapse>
    </Navbar>
  }
}