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.

Marre · Accepted Answer · 2017-08-02 13:10:19Z

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.

cold get a warning like this: Failed prop type: Invalid prop title of type object supplied to DropdownToggle, expected string. in DropdownToggle — John Ding, Commented Dec 3, 2018 at 16:25

Moe Shaaban · Accepted Answer · 2022-03-20 02:55:28Z

0

You can also use the <Image /> component, e.g.

const UserMenu = (
  <Image
    src={'https://github.com/mshaaban0.png'}
    alt="UserName profile image"
    roundedCircle
    style={{ width: '40px' }}
  />
)

<NavDropdown id="nav-dropdown-dark-example" title={UserMenu}>
//....
</NavDropdown>

answered Mar 20, 2022 at 2:55

Moe Shaaban

1746 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Add a image to React Bootstrap dropdown

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related