Disable Material UI Tabs indicator animation with a prop

Question

I am using Material UI tabs for my navigation menu.

I want to disable the animation from the indicator when navigating to another route.

I know there is a object prop TabIndicatorProps. But what is the key inside it to disable the animation? Or is it not there and do I have to do it with CSS?

<Tabs
 value={value}
 TabIndicatorProps={{ ?? }}
>

Manualmanubrium

Answer 1

Looks like the easiest way to do this is with CSS, like this:

<Tabs
  value={value}
  TabIndicatorProps={{
    style: {transition: 'none'}
  }}
>

Tested on Material UI version 4.11. I found this by looking at source code (version 4.x) for the TabIndicator component.

This should work in Material 5.x, because it also uses transition CSS property, see source code for latest version.

Emrick

Answer 2

<Tabs
  value={value}
  TabIndicatorProps={{
    style: { display: 'none' }
  }}
>

If you want to remove the indicator of MUI Tab, you need to give {display: "none"} prop inside of Tabs' TabIndicatorProps prop.

It will work correctly at any time to remove indicator of MUI Tabs. Good luck.

Solidify

That would remove it instead of disabling the animation – Teraterai

Answer 3

in mui 5, you can do it like this

<Tabs
  sx={{ '& .MuiTabs-indicator': { display: 'none' } }}
>
</Tabs>

Eglanteen

Answer 4

Hiden: true worked for me (:

(Mui v5)

<Tabs
 value={value}
 TabIndicatorProps={{ hidden: true }}
>

P.S: I then noticed that I don't need a Tabs&Tabs components, but rather a simple Box with Buttons. AND THEN I came upon the AppBar&ToolBar which are exactly what I need (: (link: https://mui.com/material-ui/react-app-bar/#app-bar-with-responsive-menu)

Tarmac