DropdownMenu Usage about react-bootstrap HOT 7 CLOSED

Hi, no docs for DropdownMenu but I think the API is the same as DropdownButton. It's children should be MenuItems and it accepts an onSelect prop that is passed the key of the selected item as it's argument. It doesn't have any other functionality than that.

from react-bootstrap.

Well it seems like it doesn't show anything when I try to use it in a
nav-bar. It doesn't have a title property either.

On Mon, May 12, 2014 at 12:22 AM, Stephen J. Collings <
[email protected]> wrote:

Hi, no docs for DropdownMenu but I think the API is the same as
DropdownButton. It's children should be MenuItems and it accepts an
onSelect prop that is passed the key of the selected item as it's
argument. It doesn't have any other functionality than that.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/75#issuecomment-42771740
.

Matt Aitchison
Founder & CEO
Lanciv LLC

from react-bootstrap.

I don't think it's designed to be used directly in a Navbar. It just encapsulates the shared menu rendering between DropdownButton and SplitButton. I'm not sure its part of the public API really. Why would it have a title property?

from react-bootstrap.

Well this is how I trying to use it. Is this not a correct use case?

                <ul className="nav navbar-nav pull-right">
                  <li className="dropdown">
                    <a href="#" className="dropdown-toggle" data-toggle="dropdown">
                      <i className="fa fa-user fa-fw"></i> Matt Aitchison
                      <b className="caret"></b>
                    </a>
                    <DropdownMenu>
                      <MenuItem key="1">Dropdown link</MenuItem>
                      <MenuItem key="2">Dropdown link</MenuItem>
                    </DropdownMenu>
                  </li>
                </ul>

from react-bootstrap.

Ah, no. I think we just have to do a bit of work on DropdownButton to allow it to be used in a Navbar and be styled correctly.

from react-bootstrap.

I've added the ability to add DropdownButtons into 'Nav`s to master f7ab634.

You should be able to achieve your use-case like this:

    var title = <span><i className="fa fa-user fa-fw"></i> Matt Aitchison</span>;
    <Navbar>
      <Nav>
        <DropdownButton key={3} title={title}>
          <MenuItem key="1">Dropdown link</MenuItem>
          <MenuItem key="2">Dropdown link</MenuItem>
        </DropdownButton>
      </Nav>
    </Navbar>

from react-bootstrap.

Awesome! I just had a chance to test this and it seems to work properly. Thanks!

from react-bootstrap.