AppBar

The AppBar component is used to display a prominent bar at the top of the screen, often containing navigation elements.

import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
    children=[
        dmc.AppBar(
            id="appbar",
            position="static",
            showMenuIcon=True,
            title="AppBar Title",
            color="primary",
            sx={'paddingLeft': 4, 'paddingRight': 4}
        )
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Props Table

Below are the main props available for the AppBar component:

Prop	Type	Default	Description
id	string	null	Unique ID for Dash callbacks.
position	string	'static'	Position of the AppBar.
color	string	'primary'	Color of the AppBar.
elevation	number	4	Elevation of the AppBar.
showMenuIcon	boolean	false	If true, the menu icon button is shown.
n_clicks	number	0	Number of times the AppBar has been clicked.
actions	list of React.ReactNode	[]	List of actions to display in the AppBar.
sx	dict		Custom styles for the AppBar.

For the full list of props, refer to the official MUI documentation, as these components are based on MUI:

MUI AppBar Documentation

Props Table​

Props Table