CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Dan Sherwin
Dan Sherwin

Reputation: 723

Splitting Material UI tabs left and right

I am using the Material UI tabs and I would like to split the tabs left and right. For example, if I have 5 tabs, and I want 3 tabs to the left and 2 tabs to the right. I have attempted to put the tabs in a row stack and split them off but that messes with the selected tab highlight. I tried using two tabs components in a row stack with each like this:

<Stack direction="row" justify-content="space-between">
    <Tabs value={selectedTab} onChange={(e, nv) => setSelectedTab(nv}}>
        <Tab value="tabone" label="One"/>
        <Tab value="tabtwo" label="Two"/>
        <Tab value="tabthree" label="Three"/>
    </Tabs>
    <Tabs value={selectedTab} onChange={(e, nv) => setSelectedTab(nv}}>
        <Tab value="tabfour" label="Four"/>
        <Tab value="tabfive" label="Five"/>
    </Tabs>
</Stack>

But this generates Javascript errors where selected value doesnt have a tab with that value.

Does anyone know of a good way to accomplish this split tabs?

Upvotes: 0

Views: 459

Answers (1)

Oki
Oki

Reputation: 3299

 <Tabs value={selectedTab} onChange={(e, nv) => setSelectedTab(nv}}>
    <Tab value="tabone" label="One"/>
    <Tab value="tabtwo" label="Two"/>
    <Tab value="tabthree" label="Three" sx={{mr: 'auto'}} />  // mui v5 way
    <Tab value="tabfour" label="Four"/>
    <Tab value="tabfive" label="Five"/>
</Tabs>

Upvotes: 2

Related Questions