diff --git a/docs/Theming.md b/docs/Theming.md
index 94c2a64de11..70f3eeb61bc 100644
--- a/docs/Theming.md
+++ b/docs/Theming.md
@@ -740,9 +740,22 @@ const App = () => (
 
 ## Replacing The AppBar
 
-For more drastic changes of the top component, you will probably want to create an `<AppBar>` from scratch instead of just passing children to react-admin's `<AppBar>`.
+By default, React-admin uses [Material-ui's `<AppBar>` component](https://material-ui.com/api/app-bar/) together with a custom container that internally uses a [Slide](https://material-ui.com/api/slide) to hide the `AppBar` on scroll. Here is an example of how to change this container with any component:
 
-By default, React-admin uses [Material-ui's `<AppBar>` component](https://material-ui.com/api/app-bar/) together with [react-headroom](https://github.com/KyleAMathews/react-headroom) to hide the `AppBar` on scroll. Here is an example top bar rebuilt from scratch to remove the "headroom" effect:
+```jsx
+// in src/MyAppBar.js
+import * as React from 'react';
+import { Fragment } from 'react';
+import { AppBar } from 'react-admin';
+
+const MyAppBar = props => (
+    <AppBar {...props} container={Fragment} />
+);
+
+export default MyAppBar;
+```
+
+For more drastic changes of the top component, you will probably want to create an `<AppBar>` from scratch instead of just passing children to react-admin's `<AppBar>`. Here is an example top bar rebuilt from scratch:
 
 ```jsx
 // in src/MyAppBar.js
diff --git a/packages/ra-ui-materialui/src/layout/AppBar.tsx b/packages/ra-ui-materialui/src/layout/AppBar.tsx
index 9bf20962833..be6ab100ac4 100644
--- a/packages/ra-ui-materialui/src/layout/AppBar.tsx
+++ b/packages/ra-ui-materialui/src/layout/AppBar.tsx
@@ -103,6 +103,7 @@ const AppBar = (props: AppBarProps): JSX.Element => {
         open,
         title,
         userMenu,
+        container: Container,
         ...rest
     } = props;
     const classes = useStyles(props);
@@ -113,7 +114,7 @@ const AppBar = (props: AppBarProps): JSX.Element => {
     const translate = useTranslate();
 
     return (
-        <HideOnScroll>
+        <Container>
             <MuiAppBar className={className} color={color} {...rest}>
                 <Toolbar
                     disableGutters
@@ -163,7 +164,7 @@ const AppBar = (props: AppBarProps): JSX.Element => {
                         : cloneElement(userMenu, { logout })}
                 </Toolbar>
             </MuiAppBar>
-        </HideOnScroll>
+        </Container>
     );
 };
 
@@ -179,6 +180,7 @@ AppBar.propTypes = {
         'secondary',
         'transparent',
     ]),
+    container: PropTypes.element,
     logout: PropTypes.element,
     open: PropTypes.bool,
     userMenu: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
@@ -186,10 +188,12 @@ AppBar.propTypes = {
 
 AppBar.defaultProps = {
     userMenu: <DefaultUserMenu />,
+    container: HideOnScroll,
 };
 
 export interface AppBarProps extends Omit<MuiAppBarProps, 'title' | 'classes'> {
     classes?: ClassesOverride<typeof useStyles>;
+    container?: React.ComponentType<any>;
     logout?: React.ReactNode;
     open?: boolean;
     title?: string | JSX.Element;