I am using react-bootstrap/Tabs for dynamic Tabs with content. If Tabs are more than 6, i want horizontal scroll to be added

Question

 import Tab from 'react-bootstrap/Tab'; import Tabs from 'react-bootstrap/Tabs'; import Sonnet from '../../components/Sonnet'; function UncontrolledExample() { return ( <Tabs defaultActiveKey="profile" id="uncontrolled-tab-example" className="mb-3" > <Tab eventKey="home" title="Home"> </Tab> <Tab eventKey="profile" title="Profile"> </Tab> <Tab eventKey="contact" title="Contact" disabled> </Tab> </Tabs> ); } export default UncontrolledExample;

ul.mb-3.nav.nav-tabs { overflow-y: hidden; overflow-x: scroll; max-width: 40%; }

import Tab from 'react-bootstrap/Tab'; import Tabs from 'react-bootstrap/Tabs'; import Sonnet from '../../components/Sonnet'; function UncontrolledExample() { return ( <Tabs defaultActiveKey="profile" id="uncontrolled-tab-example" className="mb-3" > <Tab eventKey="home" title="Home"> </Tab> <Tab eventKey="profile" title="Profile"> </Tab> <Tab eventKey="contact" title="Contact" disabled> </Tab> </Tabs> ); } export default UncontrolledExample;

I am using react-bootstrap/Tabs for dynamic Tabs with content. If Tabs are more than 6, then my requirement is to add horizontal scroll. Tried adding :

overflow-x: scroll; 
overflow-y: hidden;

It is adding a empty horizontal scrollbar.

to get horizontal scrollbar for tabs.

Answer 1

I am using this

Tabcontainer and navs as Tab

give style to Navs tag overflow:'auto', display:'flex, flex-wrap:nowrap

    function BasicExample() {
  return (
    <>
      <Tab.Container defaultActiveKey={1} mountOnEnter={true} onSelect={(e) => setActive({ [e]: activeTabClasses })}>
      <Nav variant="tabs" style={{overflow:'auto'}} className=" d-flex flex-nowrap flex-row mt-2" justify>
        <Nav.Item className='d-flex  flex-column'>
          <Nav.Link eventKey={1} >Inspections</Nav.Link>
        </Nav.Item>
        <Nav.Item className='d-flex  flex-column'>
          <Nav.Link eventKey={2}>Accessories</Nav.Link>
        </Nav.Item>
        <Nav.Item className='d-flex  flex-column'>
          <Nav.Link eventKey={3}>People</Nav.Link>
        </Nav.Item>
        <Nav.Item className='d-flex  flex-column'>
          <Nav.Link eventKey={4}>Activity</Nav.Link>
        </Nav.Item>
        <Nav.Item className='d-flex  flex-column'>
          <Nav.Link eventKey={5}>Documents</Nav.Link>
        </Nav.Item>
      </Nav>
      <Tab.Content className='d-flex flex-column flex-grow-1'>
        <Tab.Pane eventKey={1} className={`d-flex flex-column flex-grow-1`}>
          <div>Inspections</div>
        </Tab.Pane>
        <Tab.Pane eventKey={2} className={`d-flex flex-column flex-grow-1`}>
          <div>Inspections</div>
        </Tab.Pane>
        <Tab.Pane eventKey={3} className={`d-flex flex-column flex-grow-1`}>
          <div>Inspections</div>
        </Tab.Pane>
        <Tab.Pane eventKey={4} className={`d-flex flex-column flex-grow-1`}>
          <div>Inspections</div>
        </Tab.Pane>
        <Tab.Pane eventKey={5} className={`d-flex flex-column flex-grow-1`}>
          <div>Inspections</div>
        </Tab.Pane>
      </Tab.Content>
    </Tab.Container>
    </>
  );
}

export default BasicExample;