Can you disable tabs in SemanticUI?

Viewed 2411
2 Answers

If anyone is trying to disable tab with Semantic UI React using panes, this can be done by wrapping menuItem inside <Menu.Item/>.

const panes = [
  {
    menuItem: "Menu 1", // <-- a string
    render: () => (
      <Tab.Pane attached={false}>
        <Stuff1/>
      </Tab.Pane>
    ),
  },
  {
    menuItem: <Menu.Item disabled>Menu 2</Menu.Item>, // <-- a menu item
    render: () => (
      <Tab.Pane attached={false}>
        <Stuff2/>
      </Tab.Pane>
    ),
  },
];

return (
  <Tab
    fluid
    menu={{ secondary: true, pointing: true, widths: panes.length }}
    panes={panes}
  />
);
Related