5.1.4
Powered by Modulz

VerticalTab

Displays a tab in a vertical orientation

<VerticalTab label="Some Text" />

Props

PropTypeDefaultDescription
labelstringText to display within the tab
onClick() => voidfunction that is called when the tab is clicked
selectedbooleanWhether this tab is selected
expandedbooleanif defined and VerticalTab has children, then tab expansoin will be controlled by this
data-testidstringdata-testid added to the root element of the component as {data-testid}
onChangefuncCallback fired when the expand/collapse state is changed. Signature: function(event: React.SyntheticEvent, expanded: boolean) => void event: The event source of the callback. Warning: This is a generic event not a change event. expanded: The expanded state of the accordion
adminColorboolfalseIf true, semantic blue color is considered as primary color
labelVariant'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline' | 'srOnly' | 'inherit''body1'Applies the theme typography styles.

Examples

Basic

<div>

  <VerticalTab label="First Tab" />

  <VerticalTab label="Second Tab" />

</div>

Nested Menu

() => {

  const [selected, setSelected] = React.useState(0);

  return (

    <div style={{ width: 240 }}>

      <VerticalTab label="Vertical Nav 1">

        <VerticalTab

          label="Nav 6"

          onClick={() => setSelected(6)}

          selected={selected === 6}

        />

        <VerticalTab label="Vertical Nav 2">

          <VerticalTab

            label="Nav 1"

            onClick={() => setSelected(1)}

            selected={selected === 1}

          />

          <VerticalTab

            label="Nav 2"

            onClick={() => setSelected(2)}

            selected={selected === 2}

          />

          <VerticalTab

            label="Nav 3"

            onClick={() => setSelected(3)}

            selected={selected === 3}

          />

        </VerticalTab>

        <VerticalTab

          label="Nav 4"

          onClick={() => setSelected(4)}

          selected={selected === 4}

        />

      </VerticalTab>

      <VerticalTab

        label="Nav 5"

        onClick={() => setSelected(5)}

        selected={selected === 5}

      />

    </div>

  );

};