Tabs with dropdowns in nav about react-bootstrap HOT 16 CLOSED

Not at all. I've been pretty busy, just got around upgrading to 0.29 and realized it was now possible... 😶 I feel terrible, I'd like to invest a bit more time into the project, but I lift my hat off to @jquense and yourself for all the awesome work you've been doing. 👍 😁

from react-bootstrap.

Hey @mathieumg, this will be on the to-do list, just kinda low at the moment. Im not sure at this point the easiest way to get this functionality in as we have kinda coupled tabs to panels with the current implementation. Any thoughts on how the API for this should look would be appreciated!

from react-bootstrap.

We could almost cover this use case as a controlled component already:

<Nav bsStyle="tabs" activeKey={key} onSelect={handleSelect}>
      <NavItem key={1}>NavItem 1 content</NavItem>
      <NavItem key={2}>NavItem 2 content</NavItem>
        <DropdownButton title="test">
            <MenuItem key={3}>Action</MenuItem>
            <MenuItem key={4}>Another action</MenuItem>
      </DropdownButton>
    </Nav>
    <TabbedArea activeKey={key} onSelect={handleSelect}>
      <TabPane key={1}>TabPane 1 content</TabPane>
      <TabPane key={2}>TabPane 2 content</TabPane>
      <TabPane key={3}>TabPane 3 content</TabPane>
      <TabPane key={4}>TabPane 4 content</TabPane>
    </TabbedArea>

Just need to not display the tab bar if there's no tabs in the tabbed area and select the current MenuItem in the dropdown.

from react-bootstrap.

It looks like the docs are demonstrating this use case today: https://react-bootstrap.github.io/components.html#navbars. Is this still an issue for you?

from react-bootstrap.

That's navbars, no? This issue is about a similar behavior on tabs. Unless one has just become a specific case of the other. If that is the case, it might be relevant to add an example to do the same with tabs. (As is supported by Bootstrap: http://getbootstrap.com/javascript/#tabs)

from react-bootstrap.

Ah, I see tabs not navs.... Ya, we need to fix this.

from react-bootstrap.

Superceded by #526

from react-bootstrap.

Not fixed by #526

from react-bootstrap.

Moved to #1418.

from react-bootstrap.

This is now possible by combining https://react-bootstrap.github.io/components.html#tabs-custom-layout and https://react-bootstrap.github.io/components.html#navs-dropdown.

@react-bootstrap/collaborators Are you fine with me closing this? Do you think we would need to add an example of that use case in the docs?

from react-bootstrap.

Does that work? We should add it to the example if so.

from react-bootstrap.

Yeah I tested it quickly directly in the docs' editor. Could try to find the time to document it and write some tests around it even.

from react-bootstrap.

Would you mind if we keep this open until we have an example showing this, then?

from react-bootstrap.

Let's track this on #2115 instead.

from react-bootstrap.

uhjhjj

from react-bootstrap.

****

from react-bootstrap.