CODEWITHSUNDEEP
javascriptreactjsnavigationnavbarmaterial-ui
Brittany G
Brittany G

Reputation: 73

Using @Material-UI Tabs as Navbar

fairly new to the coding space. I have tried looking everywhere for the answer to this question, and while I've found many answers, none of them work for me.

My problem is that I would like to use @Material-UI tab components as a NavBar, and I can only seem to either 1. turn the tabs into static links that work but have no animation or indicator, or 2. keep the animations but have no functionality as far as changing the page goes.

I have tried this, this, this, and more, and many of the answers found within each of those.

Edit: Here is a Git Repo.

Here is my NavBar component, currently on status #2 where it has animations but not functionality:

import React from 'react';
import { Paper, Tabs, Tab } from '@material-ui/core';

const navStyle= {
    backgroundColor: '#220000',
    color: '#fff',
}

export class NavBar extends React.Component {
    state = {
        value: 0,
    };

handleChange = (event, value) => {
    event.preventDefault();
    this.setState({ value });
    console.log(value)
};

render() {      
    return (
        <div>
            <Paper>
                <Tabs
                    value={this.state.value}
                    onChange={this.handleChange}
                    indicatorColor={"secondary"}
                    // textColor="secondary"
                    centered
                    style={navStyle}
                >
                    <Tab label="Home" href='/' />
                    <Tab label="About" href='/about' />
                </Tabs>
            </Paper> 
        </div>
    )}
}

dependencies:

"@material-ui/core": "^1.3.1",
"history": "^4.7.2",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4"

Upvotes: 7

Views: 6625

Answers (1)

Tholle
Tholle

Reputation: 112917

You could make your Tab components into React Router Link components the same way that it is done in the first example you linked.

Just make sure not to preventDefault on the handleChange event, since that would stop the links from working.

Example

class App extends React.Component {
  state = {
    value: 0
  };

  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    return (
      <BrowserRouter>
        <div>
          <Paper>
            <Tabs
              value={this.state.value}
              onChange={this.handleChange}
              indicatorColor={"secondary"}
              centered
              style={navStyle}
            >
              <Tab label="Home" to="/" component={Link} />
              <Tab label="About" to="/about" component={Link} />
            </Tabs>
          </Paper>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

Upvotes: 6

Related Questions