Add a image to React Bootstrap dropdown

Question

I'm using React Bootstrap and React Router Bootstrap for my Navbar, and I am making a user profile dropdown menu list.

I'd like to be able to have an user's avatar show up in place of the 'title' property. (The same idea as the user profile dropdown on Github)

Is this possible? I don't see any options to use an image instead of title for NavDropdown

<Navbar inverse>
  <Navbar.Header>
    <Navbar.Toggle />
  </Navbar.Header>

  <Navbar.Collapse>
    <Nav pullRight>
      <NavDropdown eventKey={ 3 } id="profile-dropdown" >
        <LinkContainer to="/profile/edit" >
          <NavItem eventKey={ 3.4 } > Edit </NavItem>
        </LinkContainer>
        <LinkContainer to="/logout">
          <Logout eventKey={ 3.5 } />
        </LinkContainer>
      </NavDropdown>
    </Nav>
  </Navbar.Collapse>
</Navbar>

Would a SplitButton or straight Dropdown be a better option? I don't really see much that the "NavDropdown" is adding to the HTML.

Answer 1

The NavDropdown's title property can take any React element as a value. This is what I did:

        <Nav pullRight>
            <NavDropdown eventKey={1} 
                title={
                    <div className="pull-left">
                        <img className="thumbnail-image" 
                            src={src} 
                            alt="user pic"
                        />

                        {user.username}
                    </div>
                } 
                id="basic-nav-dropdown">

                <MenuItem eventKey={1.1} href="/profile">Profile</MenuItem>
                <MenuItem divider />
                <MenuItem eventKey={1.3}>
                    <i className="fa fa-sign-out"></i> Logout
                </MenuItem>
            </NavDropdown>
        </Nav>

You'll probably need to adjust the css a little bit.