CODEWITHSUNDEEP
reactjsmaterial-ui
wpa
wpa

Reputation: 220

How to Right align a link inside an AppBar next to Tabs for Material UI?

Still relatively new to Material UI and ReactJS.

But I'm trying to have a set of tabs at the top of the page, but I also want a Logout link to the right side of the tabs.

Here's what I have

<AppBar position="static">
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="simple tabs example"
          style={{flex:1}}
        >
          <Tab label="Approvals"  />
          <Tab label="Members" />
        </Tabs>
        <a href="http://www.logout.com">Logout</a>
      </AppBar>

But the logout link isn't aligned to the right and is on a new line underneath the Tabs.

How would I go about having it sit at the end of the tabs?

Upvotes: 0

Views: 722

Answers (1)

Kevin Shuguli
Kevin Shuguli

Reputation: 1749

I think it can help you. Add between and Logout button.

<AppBar position="static">
     <Toolbar>
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="simple tabs example"
          >
          <Tab label="Approvals"  />
          <Tab label="Members" />
        </Tabs>
        <Box flexGrow={1} />
        <Button>Logout</Button>
      </Toolbar>
 </AppBar>

Upvotes: 1

Related Questions