Shell
← Back to layouts

Shell

The frame every other layout is assembled from: an app bar, a drawer, a content region and a footer. Change the drawer's behaviour below and watch the same pieces rearrange.

Drawer variant

Docked above 960px and an overlay below it. Narrow the window past that and the same drawer changes behaviour.

What the pieces are doing

Drawer
Open
Anchor
Left
App bar
Regular
Section
Activity

The markup

razor
<VetoLayout>
    <VetoAppBar>
        <VetoIconButton Icon="@VetoIcons.Menu"
                        Label="Toggle navigation"
                        OnClick="() => _open = !_open" />
        Shell
        <VetoSpacer />
        <VetoThemeToggle />
    </VetoAppBar>

    <VetoDrawer @bind-Open="_open" Variant="VetoDrawerVariant.Responsive">
        <VetoNavMenu Items="Nav" />
    </VetoDrawer>

    <VetoMainContent>@Body</VetoMainContent>

    <VetoFooter>…</VetoFooter>
</VetoLayout>