Function AppShell 

pub fn AppShell(_: AppShellProps) -> Element

Persistent application shell with named slots and responsive breakpoint awareness.

Provides ShellContext to all descendants via use_context_provider. All layout is CSS-driven through data-shell* attributes — zero inline styles.

On compact (mobile) viewports, the sidebar switches to a separate mobile tree controlled by the mobile_sidebar variant. On desktop, the sidebar stays in the DOM and CSS controls visibility via data-shell-sidebar-visible.

Focus traps

AppShell does not manage focus traps. Consumers are responsible for implementing keyboard focus management (e.g., a focus-lock equivalent) within modal and search slot content.

Example

AppShell {
    sidebar: rsx! { MySidebar {} },
    AppContent {}
}

Props

For details, see the props struct definition.

• children : Element

  The main content slot (always rendered).

• sidebar : Option<Element>

  Optional sidebar slot.

• preview : Option<Element>

  Optional preview/detail pane slot.

• footer : Option<Element>

  Optional footer slot.

• layout : ShellLayout

  Initial layout mode. Defaults to ShellLayout::Horizontal.

• mobile_sidebar : MobileSidebar

  Mobile sidebar variant. Defaults to MobileSidebar::Drawer.

• desktop_sidebar : DesktopSidebar

  Desktop sidebar variant. Defaults to DesktopSidebar::Full.

• breakpoints : BreakpointConfig

  Breakpoint thresholds for compact/expanded detection. Defaults to { compact_below: 640.0, expanded_above: 1024.0 }.

• external_breakpoint : Option<ReadSignal<ShellBreakpoint>>

  CSP-safe override: supply an external breakpoint signal (e.g., from SSR or a matchMedia wrapper) instead of running the built-in eval. When provided, the built-in JS eval still runs but its output is ignored.

• class : Option<String>

  Extra CSS classes applied to the root element.

• sidebar_role : String

  ARIA role for the sidebar region. Defaults to "complementary".

• preview_label : String

  aria-label for the preview region. Defaults to "Preview".

• tabs : Option<Element>

  Optional bottom tab bar slot. Renders as [data-shell-tabs].

• sheet : Option<Element>

  Optional persistent bottom sheet slot. Renders as [data-shell-sheet].

• modal : Option<Element>

  Optional full-screen modal slot. Renders as [data-shell-modal][role="dialog"].

• fab : Option<Element>

  Optional floating action button slot. Renders as [data-shell-fab].

• action_bar : Option<Element>

  Optional bottom action bar slot. Renders as [data-shell-action-bar]. Typically used for mobile-only fixed bottom action patterns.

• search : Option<Element>

  Optional search overlay slot. Renders as [data-shell-search].

• modal_open : Option<ReadSignal<bool>>

  Controlled modal state. When supplied, AppShell keeps its internal modal_open signal in sync with this signal on every render.

• on_modal_change : Option<EventHandler<bool>>

  Callback fired when the shell changes modal open state.

• search_active : Option<ReadSignal<bool>>

  Controlled search-active state. When supplied, AppShell keeps its internal search_active signal in sync with this signal on every render.

• on_search_change : Option<EventHandler<bool>>

  Callback fired when the shell changes search active state.

• additional_attributes : Vec<Attribute>

  Additional HTML attributes spread onto the root <div>. Useful for data-testid, custom ARIA annotations, etc.