Page#

Download this notebook from GitHub (right-click to download).

import panel as pn
from panel_material_ui import Page, Tabs

pn.extension()

The Page component is the equivalent of a Template in Panel, defining the overall layout of an application.

Unlike a Template, the Page component is implemented entirely in JavaScript, allowing dynamic updates of its contents without re-rendering the entire layout.

Parameters:#

For details on other options for customizing the component see the layout and styling how-to guides.

Core#

config (Config): Configuration object declaring custom CSS and JS files to load specifically for this template.
logo (Path | str | dict[str, str | Path]): Logo to render in the header. Can be a string, a pathlib.Path, or a dictionary with breakpoints as keys, e.g. {‘sm’: ‘logo_mobile.png’, ‘md’: ‘logo.png’}.
meta (Meta): Meta tags and other HTML head elements.
title (str): Title of the application.

Layout#

header (Children): Items rendered in the header.
main (Children): Items rendered in the main area.
sidebar (Children): Items rendered in the sidebar.
contextbar (Children): Items rendered in the contextbar.

Contextbar#

contextbar_open (boolean): Whether the contextbar is open or closed.
contextbar_width (int): Width of the contextbar.

Busy Indicator#

busy (boolean, readonly): Linked to global busy state.
busy (Literal["circular", "linear"] | None): Whether to render a linear, circular or no busy indicator.

📄 Basic Example: Main, Sidebar, and Contextbar#

This example creates a simple Page layout with content defined in the main, sidebar, and contextbar areas.

page = Page(
    main=["## I'm the main area"],
    sidebar_width=250,
    sidebar=["## I'm the sidebar"],
    contextbar=["# I'm the contextbar"],
    title="I'm a title",
)

page.preview()

🔍 What’s Happening?#

main: The primary content area of the page, here showing a simple Markdown heading.
sidebar: A side panel typically used for navigation or filters. Its width is set to 250 pixels.
contextbar: An optional, secondary sidebar often used for auxiliary info or tools.
title: Sets the page title shown in the browser tab and can be used in the layout.

Sidebar variants#

By default the sidebar_variant is set to auto, which switches from a persistent to a temporary sidebar on mobile.

temp_page = page.clone(
    sidebar_variant='temporary'
)

temp_page.preview()

The sidebar now overlays the main content.

We can also make the sidebar permanent (disabling the sidebar toggle):

temp_page = page.clone(
    sidebar_variant='permanent'
)

temp_page.preview()

🎨 Custom Theming with `theme_config`#

This example demonstrates how to apply a custom theme to the Page layout using the theme_config option.

HEADER_COLOR = "#2A3E5C"
PAPER_COLOR = "#f8f8f8"

themed = page.clone(theme_config={
    'palette': {
        'primary': {
            'main': HEADER_COLOR # The header is styled by the primary palette
        },
        'background': {
          'paper': PAPER_COLOR, # The remaining areas are paper colored
        },
    }
}, theme_toggle=False)

themed.preview()

🎯 Key Customizations#

Primary Palette (primary.main): Sets the header color using a deep, modern blue-gray (#2A3E5C).
Background (background.paper): Applies a light neutral background (#f8f8f8) to content areas like the main, sidebar, and contextbar.

By setting theme_toggle=False, the user is not shown a button to switch between light and dark modes — keeping the design consistent.

🎨 Advanced Styling with `sx`#

This example builds on the previous themed layout, applying fine-grained custom styles using the sx parameter (which accepts CSS-like syntax).

styled = themed.clone(sx={
    "& .header": {
        "backgroundColor": "#673AB7"
    },
    "& .main": {
        "backgroundColor": "#c3c3c3",
    },
    "&.mui-dark .main": {
        "backgroundColor": "#3f3f3f",
    },
    "& .sidebar": {
        "backgroundColor": "#e9e9e9"
    },
    "&.mui-dark .sidebar": {
        "backgroundColor": "#2a2a2a",
    },
    "& .contextbar": {
        "backgroundColor": "#525252",
        "color": "white"
    },
}, theme_toggle=True)

pn.Tabs(
    ('Theme: Default', styled.preview()),
    ('Theme: Dark', styled.clone(dark_theme=True).preview())
)

🌗 Theme Toggle Enabled#

Unlike the previous example, this version re-enables the theme toggle, letting users switch between light and dark modes. The sx rules adapt accordingly — as shown with the conditional ".mui-dark .main" style.

Controls#

The Page exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:

control_page = Page()
control_page.main = [control_page.controls(jslink=True)]
control_page.preview(height=1000)