<AppBar>
The default react-admin layout renders a horizontal app bar at the top, which is rendered by the <AppBar>
component.
By default, the <AppBar>
component displays:
- a hamburger icon to toggle the sidebar width,
- the application title,
- a button to change locales (if the application uses i18n),
- a loading indicator,
- a button to display the user menu.
You can customize the App Bar by creating a custom component based on <AppBar>
, with different props.
Usage
Create a custom app bar based on react-admin’s <AppBar>
:
// in src/MyAppBar.js
import { AppBar } from 'react-admin';
import { Typography } from '@mui/material';
const MyAppBar = props => (
<AppBar {...props} color="primary">
<Typography
variant="h6"
color="inherit"
className={classes.title}
id="react-admin-title"
/>
</AppBar>
);
Then, create a custom layout based on react-admin’s <Layout>
:
// in src/MyLayout.js
import { Layout } from 'react-admin';
import { MyAppBar } from './MyAppBar';
export const MyLayout = props => <Layout {...props} appBar={MyAppBar} />;
Then pass this custom layout to the <Admin>
component:
// in src/App.js
import { MyLayout } from './MyLayout';
const App = () => (
<Admin layout={MyLayout} dataProvider={...}>
// ...
</Admin>
);
Props
Prop | Required | Type | Default | Description |
---|---|---|---|---|
children |
Optional | ReactElement |
- | What to display in the central part of the app bar |
color |
Optional | string |
- | The background color of the app bar |
enableColorOnDark |
Optional | boolean |
- | If true, the color prop is applied in dark mode |
position |
Optional | string |
- | The positioning type. |
sx |
Optional | SxProps |
- | Style overrides, powered by MUI System |
title |
Optional | ReactElement |
- | A React element rendered at left side of the screen |
userMenu |
Optional | ReactElement |
- | The content of the dropdown user menu |
Additional props are passed to the underlying MUI <AppBar>
element.