Material-UI Navs

Our Material-ui Navs component allows to create simple navigation. Navigation available in Material-ui shares general markup and styles, from the base .nav class to the active and disabled states.
Learn how to use Material-ui navigation from this documentation and navs examples to quickly and easily create elegant and flexible navs.

Nav pills

Copy

import React from "react";
// @material-ui/core components;
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";

export default function Example() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <>
      <Tabs
        value={value}
        onChange={handleChange}
        aria-label="simple tabs example"
      >
        <Tab label="UI/UX Design" />
        <Tab label="Programming" />
        <Tab label="Graphic" />
      </Tabs>
    </>
  );
}

Circled nav pills

Copy

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
// @material-ui/icons components
import Grain from "@material-ui/icons/Grain";
import ModeComment from "@material-ui/icons/ModeComment";
import CloudDownload from "@material-ui/icons/CloudDownload";

// core components
import componentStyles from "assets/theme/components/tabs.js";

const useStyles = makeStyles(componentStyles);

export default function Example() {
  const [value, setValue] = React.useState(0);
  const classes = useStyles();
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  const tabClasses = {
    root: classes.tabCircle,
  };
  return (
    <>
      <Tabs
        value={value}
        onChange={handleChange}
        aria-label="simple tabs example"
      >
        <Tab icon={<Grain />} classes={tabClasses} />
        <Tab icon={<ModeComment />} classes={tabClasses} />
        <Tab icon={<CloudDownload />} classes={tabClasses} />
      </Tabs>
    </>
  );
}

Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.

Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Copy

import React from "react";
// @material-ui/core components
import Box from "@material-ui/core/Box";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Tab from "@material-ui/core/Tab";
import Tabs from "@material-ui/core/Tabs";
import Typography from "@material-ui/core/Typography";
// @material-ui/lab components
import TabContext from "@material-ui/lab/TabContext";
import TabPanel from "@material-ui/lab/TabPanel";
// @material-ui/icons components
import CloudUpload from "@material-ui/icons/CloudUpload";
import DateRange from "@material-ui/icons/DateRange";
import Notifications from "@material-ui/icons/Notifications";

// core components

export default function Example() {
  const [value, setValue] = React.useState(0);
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <>
      <TabContext value={value + ""}>
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="simple tabs example"
        >
          <Tab
            icon={<Box component={CloudUpload} marginRight=".5rem" />}
            label="Home"
          />
          <Tab
            icon={<Box component={Notifications} marginRight=".5rem" />}
            label="Profile"
          />
          <Tab
            icon={<Box component={DateRange} marginRight=".5rem" />}
            label="Messages"
          />
        </Tabs>
        <Box component={Card} marginLeft=".5rem" marginRight=".5rem">
          <CardContent>
            <TabPanel value="0">
              <Typography variant="body2" component="p">
                Raw denim you probably haven't heard of them jean shorts Austin.
                Nesciunt tofu stumptown aliqua, retro synth master cleanse.
                Mustache cliche tempor, williamsburg carles vegan helvetica.
                Reprehenderit butcher retro keffiyeh dreamcatcher synth.
              </Typography>
              <Typography variant="body2" component="p">
                Raw denim you probably haven't heard of them jean shorts Austin.
                Nesciunt tofu stumptown aliqua, retro synth master cleanse.
              </Typography>
            </TabPanel>
            <TabPanel value="1">
              <Typography variant="body2" component="p">
                Cosby sweater eu banh mi, qui irure terry richardson ex squid.
                Aliquip placeat salvia cillum iphone. Seitan aliquip quis
                cardigan american apparel, butcher voluptate nisi qui.
              </Typography>
            </TabPanel>
            <TabPanel value="2">
              <Typography variant="body2" component="p">
                Raw denim you probably haven't heard of them jean shorts Austin.
                Nesciunt tofu stumptown aliqua, retro synth master cleanse.
                Mustache cliche tempor, williamsburg carles vegan helvetica.
                Reprehenderit butcher retro keffiyeh dreamcatcher synth.
              </Typography>
            </TabPanel>
          </CardContent>
        </Box>
      </TabContext>
    </>
  );
}