App Shell Props

Name	Type	Default	Description
variant	'wash' | 'surface' | 'section' | 'elevated'	'elevated'	Page background. elevated with both a top nav and a side nav, on a wide viewport, puts the content on a rounded backdrop.
contentPadding	SpacingStep	-	Padding of the content region. Omit it and the content is flush.
height	'fill' | 'auto'	'fill'	fill uses 100dvh. An inline height overrides that length.
mobileNav	false | AppShellMobileNav	-	false turns the drawer off. An object sets breakpoint (sm 640, md 768, lg 1024, xl 1280, 2xl 1536, or none), isOpen, and hasToggle.
mobileNavOpen	boolean	false	v-model:mobile-nav-open. The component also emits mobileNavOpenChange.

SpacingStep accepts 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10. The default breakpoint is md, and the query is (width < Npx). hasToggle defaults to true.

Slots

Name	Description
default	Page content, rendered in the main region.
topNav	The top bar, usually a TopNav. On a narrow viewport its items move into the shell drawer.
sideNav	The side bar, usually a SideNav. Below the breakpoint it renders inside the drawer instead of beside the content.
banner	A banner between the navigation and the content.
mobileNav	Replaces the default drawer.

useAppShellMobile

Import it from @astryx-vue/core. It returns the nearest shell:

Name	Type	Description
isMobile	boolean	True when the viewport is below the shell breakpoint.
isMobileNavOpen	boolean	Whether the drawer is open.
isMobileNavEnabled	boolean	False outside a shell, or when mobileNav is false.
hasAutoToggle	boolean	Whether the shell draws the menu button.
hasSideNav	boolean	Whether the side nav slot is set.
mobileNavId	string	Id of the drawer. Top nav items teleport into #${id}-items.
toggleMobileNav	() => void	Toggles the drawer. A no-op outside a shell.
openMobileNav	() => void	Opens the drawer.
closeMobileNav	() => void	Closes the drawer.

The main region is #astryx-app-shell-main, a div with role="main" and tabindex="-1". The skip link label follows the active locale.

Native attributes

AppShell renders a <div>.

The following go to that element:

• HTML attributes.
• aria-* attributes.
• data-* attributes.
• class.
• style.

class is merged. The root sets data-variant and data-height.