diff --git a/docs/src/pages/demos/bottom-navigation/LabelBottomNavigation.tsx b/docs/src/pages/demos/bottom-navigation/LabelBottomNavigation.tsx
new file mode 100644
index 00000000000000..58de02f68ccef4
--- /dev/null
+++ b/docs/src/pages/demos/bottom-navigation/LabelBottomNavigation.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import BottomNavigation from '@material-ui/core/BottomNavigation';
+import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
+import Icon from '@material-ui/core/Icon';
+import RestoreIcon from '@material-ui/icons/Restore';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
+
+const useStyles = makeStyles({
+  root: {
+    width: 500,
+  },
+});
+
+function LabelBottomNavigation() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState('recents');
+
+  function handleChange(event: React.ChangeEvent<{}>, newValue: string) {
+    setValue(newValue);
+  }
+
+  return (
+    <BottomNavigation value={value} onChange={handleChange} className={classes.root}>
+      <BottomNavigationAction label="Recents" value="recents" icon={<RestoreIcon />} />
+      <BottomNavigationAction label="Favorites" value="favorites" icon={<FavoriteIcon />} />
+      <BottomNavigationAction label="Nearby" value="nearby" icon={<LocationOnIcon />} />
+      <BottomNavigationAction label="Folder" value="folder" icon={<Icon>folder</Icon>} />
+    </BottomNavigation>
+  );
+}
+
+export default LabelBottomNavigation;
diff --git a/docs/src/pages/demos/bottom-navigation/SimpleBottomNavigation.tsx b/docs/src/pages/demos/bottom-navigation/SimpleBottomNavigation.tsx
new file mode 100644
index 00000000000000..3a1935c9443754
--- /dev/null
+++ b/docs/src/pages/demos/bottom-navigation/SimpleBottomNavigation.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import BottomNavigation from '@material-ui/core/BottomNavigation';
+import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
+import RestoreIcon from '@material-ui/icons/Restore';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
+
+const useStyles = makeStyles({
+  root: {
+    width: 500,
+  },
+});
+
+function SimpleBottomNavigation() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState(0);
+
+  return (
+    <BottomNavigation
+      value={value}
+      onChange={(event, newValue) => {
+        setValue(newValue);
+      }}
+      showLabels
+      className={classes.root}
+    >
+      <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
+      <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
+      <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
+    </BottomNavigation>
+  );
+}
+
+export default SimpleBottomNavigation;