{"action":"opened","issue":{"url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/1111","labels_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/1111/labels{/name}","comments_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/1111/comments","events_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/1111/events","html_url":"https://github.com/react-bootstrap/react-bootstrap/issues/1111","id":99270944,"number":1111,"title":"Feature request: LeftTabs component","user":{"login":"kennyw12","id":1689040,"avatar_url":"https://avatars.githubusercontent.com/u/1689040?v=3","gravatar_id":"","url":"https://api.github.com/users/kennyw12","html_url":"https://github.com/kennyw12","followers_url":"https://api.github.com/users/kennyw12/followers","following_url":"https://api.github.com/users/kennyw12/following{/other_user}","gists_url":"https://api.github.com/users/kennyw12/gists{/gist_id}","starred_url":"https://api.github.com/users/kennyw12/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kennyw12/subscriptions","organizations_url":"https://api.github.com/users/kennyw12/orgs","repos_url":"https://api.github.com/users/kennyw12/repos","events_url":"https://api.github.com/users/kennyw12/events{/privacy}","received_events_url":"https://api.github.com/users/kennyw12/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-08-05T18:43:25Z","updated_at":"2015-08-05T18:43:25Z","closed_at":null,"body":"We want to create Tabs that look like this:\r\n\r\n![simple left tabs](https://cloud.githubusercontent.com/assets/1689040/9094273/b11e42ca-3b65-11e5-85c4-d46f3d61a949.png)\r\n\r\nand this:\r\n\r\n![complicated left tabs](https://cloud.githubusercontent.com/assets/1689040/9094287/c20f411a-3b65-11e5-8b4c-2373f40163bf.png)\r\n\r\nHere's the HTML/CSS for the [top component (simple left tabs)](http://jsbin.com/mosagifaxu/1/edit?html,output) and for the [bottom component (complicated left tabs)](http://jsbin.com/yosohavumo/edit?html,output)\r\n\r\nWould you be open to a new component - `LeftTabs` - that could build these two examples? Here's what we think the API could look like:\r\n\r\nSimple left tabs:\r\n\r\n```jsx\r\n<LeftTabs defaultActiveKey={1} navWidth={2}>\r\n  <Tab title=\"meep\">Content 1</Tab>\r\n  <Tab title=\"foo\">Content 2</Tab>\r\n  <Tab title=\"bar\">Content 3</Tab>\r\n  <Tab title=\"baz\">Content 4</Tab>\r\n</LeftTabs>\r\n```\r\n\r\nComplicated left tabs:\r\n\r\n```jsx\r\n<LeftTabs defaultActiveKey={1} navHeader=\"Service Plans\" contentHeader=\"Plan Features\" navWidth={4}>\r\n  <Tab title={<Row>\r\n      <Col xs={5} className=\"tab-title\">Spark</Col>\r\n      <Col xs={7}>Free</Col>\r\n    </Row>}>Content 1</Tab>\r\n  <Tab title={<Row>\r\n      <Col xs={5} className=\"tab-title\">Boost</Col>\r\n      <Col xs={7}>$10/month</Col>\r\n    </Row>}>Content 2</Tab>\r\n  <Tab title={<Row>\r\n      <Col xs={5} className=\"tab-title\">Amp</Col>\r\n      <Col xs={7}>$50/month</Col>\r\n    </Row>}>Content 3</Tab>\r\n  <Tab title={<Row>\r\n      <Col xs={5} className=\"tab-title\">Shockingly long plan name is important to test</Col>\r\n      <Col xs={7}>$1000/month</Col>\r\n    </Row>}>Content 4</Tab>\r\n</LeftTabs>\r\n```\r\n\r\nAnd of course, we'd make a PR for it :grin: \r\n\r\nThe Pivotal UI Team\r\n@atomanyih @ctaymor @gpleiss @kennyw12 @matt-royal @nicw @stubbornella"}}