CODEWITHSUNDEEP
reactjsuser-interfacetabscentersemantic-ui-react
John
John

Reputation: 29

How do Center Semantic UI Tab Menus React?

https://react.semantic-ui.com/modules/tab#types-basic

I am trying to center the menu tabs to the center (left and right) but I can't figure it out the tab documentation. import React from 'react' import { Tab } from 'semantic-ui-react'

const panes = [
  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
]

const TabExampleBasic = () => <Tab panes={panes} />

export default TabExampleBasic

Upvotes: 1

Views: 1884

Answers (2)

Igor
Igor

Reputation: 144

You can do something like this: 

<Tab
      menu={{
        attached: true,
        tabular: true,
        style: {
          display: "flex",
          justifyContent: "center"
        }
      }}
      panes={panes}
    />

Upvotes: 4

Parth Patel
Parth Patel

Reputation: 31

You have to do it like this :

Tab menu={{ attached: true, tabular: 'right' }} panes={panes}

You can set tabular value to true, left or right.

You can find this on https://react.semantic-ui.com/modules/tab also.

Upvotes: 0

Related Questions