dmc.AppShell without left NavBar or Right Aside

Dash Python
1

Hi all,

I’ve been trying to understand whether the layout of dmc.Appshell can be easily customised, but don’t understand the doc on this.

I’m aiming for a layout with no left navbar or right aside, so the header would have the same width as the body, preferably both having a max width set (say, 1400px).

I’ve found, for example, that adding this to a local styles sheet has no effect (it gets overriden)

:root {
    --app-shell-navbar-width: 0px;
    --app-shell-navbar-offset: 0px;
  }

The emphasis here is on ‘easily’ - it’s not too hard to discard Appshell and create the layout I want from other DMC components, but it would be nice to know if there is an easier way using AppShell before I switch to doing that. The default AppShell behaviour (specifying no Navbar or Aside) is actually quite close to what I want, except that the Header is wider than the body content.

2

Hi @davidharris

I’m not sure what you mean. This seems to work for me


import dash_mantine_components as dmc

from dash import Dash, _dash_renderer

_dash_renderer._set_react_version("18.2.0")

app = Dash()


app_shell = dmc.AppShell(
    [
        dmc.AppShellHeader("header"),
        # dmc.AppShellNavbar(navbar, p=24),
        # dmc.AppShellAside("Aside", withBorder=False),
        dmc.AppShellMain("page_content"),
    ],
    header={"height": 70},
)

app.layout = dmc.MantineProvider([app_shell])


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

image
image1384×426 15.8 KB

1 Like
3

Thanks for looking at this, and I realize I had some styling code in my app I’d somehow become blind to. And apologies for not including a working example.

However if I try to use a dmc.Container() to limit the app width (a one-line change to your code)…

app.layout = dmc.MantineProvider(dmc.Container([app_shell]))

… then the header stays full width on a wide screen

image
image1329×488 19.6 KB

4

The dbc.Conatiner component adds some padding. You can make it less by using fluid=True

app.layout = dmc.MantineProvider(dmc.Container([app_shell],fluid=True))

If you want no padding, you can use html.Div or dmc.Paper

1 Like
5

I do want the padding! (~ a max width for the content) :slight_smile:
But I’d like the same padding on the header.

I think I have a solution now, by changing the positioning of the header from fixed to absolute - hopefully this will continue to work on a more complex app. The header scrolls off the top of the page, but I think that will be OK

import dash_mantine_components as dmc

from dash import Dash, _dash_renderer

_dash_renderer._set_react_version("18.2.0")

app = Dash()
app_shell = dmc.AppShell(
    [
        dmc.AppShellHeader(dmc.Text("header"), style={"position":"absolute"}),
        dmc.AppShellMain([dmc.Text("Lorem ipsum") for _ in range(40)]),
    ],
    header={"height": 70},
    style={"position":"relative"},
)

app.layout = dmc.MantineProvider(dmc.Container([app_shell]))

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