API reference · Material Next

Each element's page has a live demo and usage notes; this page collects the generated API of all of them. A property marked Property only has no attribute: set it from JavaScript (objects, arrays and callbacks are always property only). Boolean attributes are on when present.

The JavaScript API of the marketing hub (controllers, ScreenHost, types) is listed on Marketing API.

Components

`<mnw-app-showcase>`

import 'material-next-web-components/app-showcase.js'; · class MaterialNextAppShowcase · App showcase guide and demo

A Material app showcase that fetches and renders promoted Android apps.

<mnw-app-showcase> properties
Property	Attribute	Type	Default	Description
`appsEndpoint`	`apps-endpoint`	`string`	`'https://android-apps-metadata-backend.mihaicristiancondrea.workers.dev/api/v1/apps'`	API endpoint returning Android app metadata.
`storeHref`	`store-href`	`string`	`'https://play.google.com/store/apps/dev?id=5390214922640123642'`	Link used by the section-level “View all apps” action.
`headline`	`headline`	`string`	`'More apps from Mihai-Cristian'`	Section heading.
`limit`	`limit`	`number`	`6`	Maximum number of apps to render.

`<mnw-code-block>`

import 'material-next-web-components/code-block.js'; · class MaterialNextCodeBlock · Code block guide and demo

A Material code block with Google Sans Code typography, lightweight syntax colours and an optional copy action.

<mnw-code-block> properties
Property	Attribute	Type	Default	Description
`language`	`language`	`string`	`'text'`	The programming language label displayed in the block header.
`code`	`code`	`string`	`''`	The code snippet to render. Slotted content is used when omitted.
`copy`	`copy`	`boolean`	`false`	Shows the Material copy-to-clipboard action.

<mnw-code-block> events
Event	Description
`mnw-code-copy-error`	`{code, error}` when the Clipboard API is missing or refuses; the block shows "Copy failed".
`mnw-code-copy`	`{code}` after the code is written to the clipboard.

<mnw-code-block> slots
Slot	Description
Default	Code as text, used when `code` is empty. Wrap markup in a `<template>` so the browser does not render it.

<mnw-code-block> CSS custom properties
Custom property	Description
`--md-sys-color-code-background`	Code surface.
`--md-sys-color-code-on-background`	Code text.
`--md-sys-color-code-comment`	Comment tokens.
`--md-sys-color-code-punctuation`	Punctuation tokens.
`--md-sys-color-code-tag`	Markup tag tokens.
`--md-sys-color-code-string`	String tokens.
`--md-sys-color-code-keyword`	Keyword tokens.
`--md-sys-color-code-function`	Function name tokens.
`--md-sys-color-code-variable`	Variable and number tokens.

`<mnw-expressive-tab-bar>`

import 'material-next-web-components/expressive-tab-bar.js'; · class MaterialNextExpressiveTabBar · Expressive tab bar guide and demo

A Material 3 expressive top app tab bar styled with rounded app-navigation chrome and Material Web tabs.

<mnw-expressive-tab-bar> properties
Property	Attribute	Type	Default	Description
`ariaLabel`	`aria-label`	`string`	`'Article tabs'`	Accessible label for the navigation landmark.
`activeIndex`	`active-index`	`number`	`0`	Index of the active tab.
`iconPosition`	`icon-position`	`ExpressiveTabIconPosition`	`'start'`	Places tab icons before, after, above, or below tab labels.
`tabs`	Property only	`ExpressiveTabItem[]`	`exampleNavigationItems`	The tabs, as `{label, href, icon?}` objects. JavaScript property only. The default is three placeholder tabs linking to `#` anchors; always set it.

<mnw-expressive-tab-bar> events
Event	Description
`change`	`{activeIndex, item}` after the selected tab changes.
`navigate`	`{index, item}` before following a tab's `href`. Cancelable: `preventDefault()` keeps the browser from following the link, for routing in JavaScript.

<mnw-expressive-tab-bar> CSS custom properties
Custom property	Description
`--mnw-expressive-tab-bar-container-color`	Bar background.
`--mnw-expressive-tab-bar-on-container`	Inactive label and icon colour.
`--mnw-expressive-tab-bar-active-container`	Active tab background.
`--mnw-expressive-tab-bar-on-active-container`	Active label and icon colour.
`--mnw-expressive-tab-bar-shape`	Corner radius. Default `999px`.
`--mnw-expressive-tab-bar-height`	Tab height. Default `80px`.
`--mnw-expressive-tab-min-width`	Minimum tab width.
`--mnw-expressive-tab-padding-inline`	Tab inline padding.

<mnw-expressive-tab-bar> CSS parts
Part	Description
`tabs`	The underlying Material Web tabs element.
`tab`	Each Material Web primary tab.

`<mnw-home>`

import 'material-next-web-components/material-next-home.js'; · class MaterialNextHome · Home view guide and demo

Home and examples app shell for material-next-web-components. It switches between a home view and an examples view from location.hash (#home, #examples or an example's anchor), so use one per page.

<mnw-home> properties
Property	Attribute	Type	Default	Description
`docsHref`	`docs-href`	`string`	`'./install/'`	The URL opened by the install call-to-action button.
`headline`	`headline`	`string`	`'material-next-web-components'`	Main hero headline.

<mnw-home> slots
Slot	Description
Default	Optional supporting content displayed below the home content.

<mnw-home> CSS custom properties
Custom property	Description
`--mnw-home-min-height`	Minimum height of the view. Default `100vh`.

<mnw-home> CSS parts
Part	Description
`action`	The "Get started" button, linking to `docs-href`.

`<mnw-site-footer>`

import 'material-next-web-components/site-footer.js'; · class MaterialNextSiteFooter · Site footer guide and demo

A rounded copyright bar with optional social links.

<mnw-site-footer> properties
Property	Attribute	Type	Default	Description
`owner`	`owner`	`string`	`'Mihai-Cristian Condrea'`	Copyright holder.
`startYear`	`start-year`	`number`	`2020`	First copyright year.
`endYear`	`end-year`			Last copyright year. Defaults to the current year.
`linksLabel`	`links-label`	`string`	`'Social profiles'`	Accessible label for the links.

<mnw-site-footer> slots
Slot	Description
Default	Links or Material icon buttons, each with an accessible name.

<mnw-site-footer> CSS custom properties
Custom property	Description
`--mnw-site-footer-max-width`	Widest the bar gets, centered. Default `900px`.
`--mnw-site-footer-container-color`	The bar's color. Default `--md-sys-color-surface-container`.

<mnw-site-footer> CSS parts
Part	Description
`surface`	The footer bar.

`<mnw-app-shell>`

import 'material-next-web-components/app-shell.js'; · class MaterialNextAppShell · App shell guide and demo

An application's frame: a navigation drawer, a top app bar with the screen's title and actions, and the screen. Below permanent-from (900px of the shell's own width by default) the drawer is a modal sheet opened from the menu button; from it, a permanent column beside a connected app bar and content pane. The navigation is one DOM tree in both layouts, so its state and listeners survive every resize. The shell never changes the URL. A tap on a destination fires a cancelable navigation-request: a router calls preventDefault() and navigates itself (or asks about unsaved changes first); without one, the link is followed as usual. The app tells the shell where it is with active-path, heading and leading.

<mnw-app-shell> properties
Property	Attribute	Type	Default	Description
`heading`	`heading`	`string`	`''`	The current screen's title, in the top app bar.
`headingLevel`	`heading-level`	`number`	`1`	The heading level of the title.
`leading`	`leading`	`AppShellLeading`	`'menu'`	`menu` opens the modal drawer (hidden beside the permanent drawer), `back` fires `back-request`, `none` shows nothing.
`activePath`	`active-path`	`string`	`''`	The current path; defaults to `location.pathname`. Marks the current destination.
`navigationMode`	`navigation-mode`	`'auto' \| 'none' \| AppShellNavigationMode`	`'auto'`	`auto` follows the layout policy; `modal` and `permanent` force a layout; `none` has no drawer and no menu button, for single-screen pages.
`permanentFrom`	`permanent-from`		`DEFAULT_PERMANENT_DRAWER_FROM`	The width, in CSS pixels of the shell, from which the drawer is permanent.
`layoutPolicy`	Property only	`AppShellLayoutPolicy \| undefined`		Replaces `permanent-from` with a full policy, for layouts with more rules.
`drawerOpen`	`drawer-open`	`boolean`	`false`	The modal drawer is open. Always false beside a permanent drawer.
`layout`	`layout`	`AppShellNavigationMode`	`'modal'`	The layout in use, `modal` or `permanent`. Set by the shell; read it, or style on it.
`scrolled`	`scrolled`	`boolean`	`false`	Content has scrolled under the top app bar. Set by the shell.
`navigationLabel`	`navigation-label`	`string`	`'Navigation'`	Accessible name of the navigation landmark.
`appearance`	`appearance`	`AppShellAppearance`	`'tonal'`	`tonal` (default): the bar takes a tone once content scrolls under it, and the permanent drawer frames a rounded content pane. `outlined`: flat surfaces divided by outline-variant lines, under the bar and the drawer header and along the drawer's edge.
`drawerHeading`	`drawer-heading`	`string`	`''`	A plain title at the top of the drawer, for example `Menu`, with a close button in the modal layout. For sites without a product brand; the `brand` slot still shows below it when filled.
`navigationSize`	`navigation-size`	`AppShellNavigationSize`	`'standard'`	`standard` 48px destinations; `large` 56px ones with 16px labels, as Material Components draws them.

<mnw-app-shell> events
Event	Description
`navigation-mode-change`	`{mode}`: the layout switched between `modal` and `permanent`.
`drawer-toggle`	`{open}`: the modal drawer opened or closed.
`back-request`	The back button was pressed (`leading="back"`).
`navigation-request`	Cancelable. `{href, url, item}`: a destination was activated. `preventDefault()` keeps the browser from following the link.

<mnw-app-shell> slots
Slot	Description
Default	The screen.
`brand`	The top of the drawer: a logo and the app's name.
`navigation`	`<mnw-navigation-item>` elements, links, or groups of them with your own headings.
`footer`	A page footer, below the main content.
`navigation-footer`	The bottom of the drawer: a theme picker, legal links.
`actions`	The top app bar's trailing actions, for example `<mnw-product-launcher>`.

<mnw-app-shell> CSS custom properties
Custom property	Description
`--mnw-app-shell-drawer-width`	Width of the permanent drawer. Default `264px`.
`--mnw-app-shell-modal-drawer-width`	Width of the modal drawer. Default `320px`, at most the window less 56px.
`--mnw-app-shell-top-app-bar-height`	Height of the top app bar. Default `72px`, `64px` when the shell is narrower than 600px.
`--mnw-app-shell-pane-radius`	The content pane's top-start corner beside the permanent drawer. Default `28px`.

<mnw-app-shell> CSS parts
Part	Description
`drawer`	The navigation drawer.
`drawer-header`	The row with `drawer-heading` and the close button.
`top-app-bar`	The top app bar.
`headline`	The screen's title.
`content`	The `<main>` element around the screen.

`<mnw-navigation-group>`

import 'material-next-web-components/app-shell.js'; · class MaterialNextNavigationGroup · Navigation group guide and demo

An expandable category in an app shell drawer. Destinations stay mounted while collapsed. A newly active destination opens its category.

<mnw-navigation-group> properties
Property	Attribute	Type	Default	Description
`label`	`label`	`string`	`''`	Category name.
`icon`	`icon`	`string`	`''`	Material Symbols name.
`open`	`open`	`boolean`	`false`	Whether destinations are expanded.

<mnw-navigation-group> events
Event	Description
`navigation-group-toggle`	`{open}` after the visitor toggles the category.

<mnw-navigation-group> slots
Slot	Description
Default	Navigation items, or nested navigation groups.
`icon`	A custom category icon, overriding `icon`.

<mnw-navigation-group> CSS parts
Part	Description
`toggle`	The category button.

`<mnw-navigation-item>`

import 'material-next-web-components/app-shell.js'; · class MaterialNextNavigationItem · App shell guide and demo

One destination in an app shell's navigation drawer: an icon, a label and an optional badge, as a link. <mnw-app-shell> marks the current one (active) from its active-path, and asks before following it.

<mnw-navigation-item> properties
Property	Attribute	Type	Default	Description
`href`	`href`	`string`	`''`	Where the item goes.
`label`	`label`	`string`	`''`	The label, when the default slot is empty.
`icon`	`icon`	`string`	`''`	A Material Symbols name, when the `icon` slot is empty.
`trailingIcon`	`trailing-icon`	`string`	`''`	A Material Symbols name shown at the end, when the `trailing` slot is empty: `open_in_new` for a link that leaves the site.
`target`	`target`	`string`	`''`	`_blank` opens a new tab; the shell then lets the link go without asking.
`match`	`match`	`DestinationMatch`	`'prefix'`	`exact` is current only on its own path; `prefix` also on paths under it.
`active`	`active`	`boolean`	`false`	The current destination. Set by `<mnw-app-shell>`.

<mnw-navigation-item> slots
Slot	Description
Default	The label. Overrides `label`.
`icon`	A custom icon, for example an image or an SVG. Overrides `icon`.
`badge`	Trailing text, for example a count.
`trailing`	A custom trailing icon. Overrides `trailing-icon`.

<mnw-navigation-item> CSS custom properties
Custom property	Description
`--mnw-navigation-item-height`	Minimum height. Default `48px`; `56px` in a shell with `navigation-size="large"`.
`--mnw-navigation-item-height`	Height of the item. Default `48px`.

<mnw-navigation-item> CSS parts
Part	Description
`link`	The link.

`<mnw-product-launcher>`

import 'material-next-web-components/launcher.js'; · class MaterialNextProductLauncher · Product launcher guide and demo

An apps button that opens the visitor's favorite products, consoles and shortcuts, with a separate list of admin redirects. Visitors edit their favorites in a draft (select to add or remove, drag or Alt+arrow to reorder). Done saves; Cancel, Escape and closing discard the draft. The list persists in localStorage, shared by every page on the origin. The current product is never offered: entries matching current-product, exclude or this page's URL are hidden, and a hidden favorite keeps its place for the pages where it shows. Without a catalog the launcher lists Mihai-Cristian Condrea's projects (PROJECT_LAUNCHER_CATALOG).

<mnw-product-launcher> properties
Property	Attribute	Type	Default	Description
`catalog`	Property only	`LauncherCatalog`	`PROJECT_LAUNCHER_CATALOG`	Everything the launcher can show. Defaults to PROJECT_LAUNCHER_CATALOG.
`currentProduct`	`current-product`	`string`	`''`	The product this page belongs to: an item id or a product name.
`currentUrl`	`current-url`	`string`	`''`	This page's URL, for hiding links to itself. Defaults to `location.href`.
`exclude`	`exclude`	`string[]`	`[]`	More item ids or product names to hide, separated by spaces or commas.
`storageKey`	`storage-key`		`DEFAULT_LAUNCHER_STORAGE_KEY`	The localStorage key favorites persist under.
`store`	Property only	`LauncherPreferenceStore \| undefined`		Replaces localStorage, for example with a store that syncs to an account.
`open`	`open`	`boolean`	`false`	The panel is open.
`followColorPalette`	`follow-color-palette`	`boolean`	`false`	Use the host's Material color roles instead of the Google launcher palette.
`label`	`label`	`string`	`'Products and shortcuts'`	Accessible name of the apps button.
`heading`	`heading`	`string`	`'Your favorites'`	Title of the favorites card.
`redirectsHeading`	`redirects-heading`	`string`	`''`	Optional visible heading above admin redirects; empty by default.

<mnw-product-launcher> events
Event	Description
`launcher-toggle`	`{open}`: the panel opened or closed.
`launcher-change`	`{favoriteIds}`: Done or reset committed favorites (hidden ones included).

<mnw-product-launcher> CSS custom properties
Custom property	Description
`--mnw-launcher-width`	Panel width from 600px up. Default `360px`.
`--mnw-launcher-monochrome-filter`	Filter for `monochrome` icons. Default `none`; monochrome artwork follows the panel text color.

<mnw-product-launcher> CSS parts
Part	Description
`trigger`	The apps button.
`panel`	The panel surface.

`<mnw-color-picker>`

import 'material-next-web-components/theme/ui/color-picker.js'; · class MaterialNextColorPicker · Theme controls guide and demo

A color picker in Material's HCT space: a hex swatch that opens the system color dialog, and hue, chroma and tone sliders. Reusable on its own, for example to choose an app's seed color.

<mnw-color-picker> properties
Property	Attribute	Type	Default	Description
`value`	`value`		`DEFAULT_SOURCE_COLOR`	The color, as `#rrggbb`.
`swatchLabel`	`swatch-label`	`string`	`'Source color'`	Label of the swatch row.

<mnw-color-picker> events
Event	Description
`type`
`input`	While the color changes; read `value`.
`change`	When a change is committed (a slider let go, the dialog closed).

<mnw-color-picker> CSS parts
Part	Description
`swatch`	The round swatch.
`sliders`	The surface around the three sliders.

`<mnw-hct-slider>`

import 'material-next-web-components/theme/ui/hct-slider.js'; · class MaterialNextHctSlider · Theme controls guide and demo

One HCT channel (hue, chroma or tone) as a labelled Material slider over a gradient of the colors it reaches from color.

<mnw-hct-slider> properties
Property	Attribute	Type	Default	Description
`channel`	`channel`	`HctChannel`	`'hue'`	Which channel the slider sets.
`label`	`label`	`string`	`''`	Visible and accessible label.
`value`	`value`	`number`	`0`	The channel's value: hue 0 to 360, chroma 0 to 150, tone 0 to 100.
`color`	`color`	`string`	`''`	The current color, as hex; the gradient varies only this channel.

<mnw-hct-slider> events
Event	Description

`input`	While the value changes.
`change`	When the visitor lets go.

`<mnw-theme-button>`

import 'material-next-web-components/theme/ui/theme-button.js'; · class MaterialNextThemeButton · Theme controls guide and demo

A palette button for a top app bar. It opens <mnw-theme-controls> in a panel under it, themes the document and remembers the choice, so a page needs only this element.

<mnw-theme-button> properties
Property	Attribute	Type	Default	Description
`open`	`open`	`boolean`	`false`	Whether the panel is open.
`label`	`label`	`string`	`'Theme'`
`storageKey`	`storage-key`		`DEFAULT_THEME_STORAGE_KEY`	localStorage key; every page on the origin with the same key shares the theme.
`store`	Property only	`ThemePreferenceStore \| undefined`		A store of your own, instead of `storage-key`.
`defaultColor`	`default-color`		`DEFAULT_SOURCE_COLOR`	The page's own seed, shown until a color is chosen.

<mnw-theme-button> events
Event	Description
`color-theme-change`	From the controls: `{sourceColor?, mode}`.

`<mnw-theme-controls>`

import 'material-next-web-components/theme/ui/theme-controls.js'; · class MaterialNextThemeControls · Theme controls guide and demo

A page's theme controls: a source color (hex swatch and HCT sliders), the color mode, and a reset to the page's own colors. Controlled by default: set source-color and mode, and apply each color-theme-change yourself. Set storage-key (or store) to persist the choice, and apply to theme the document as well.

<mnw-theme-controls> properties
Property	Attribute	Type	Default	Description
`sourceColor`	`source-color`	`string`	`''`	The chosen source color; empty keeps the page's own colors.
`mode`	`mode`	`ColorMode`	`'system'`	Light, dark or the system's choice.
`defaultColor`	`default-color`		`DEFAULT_SOURCE_COLOR`	Shown in the picker until a color is chosen: the page's own seed.
`heading`	`heading`	`string`	`'Theme'`
`storageKey`	`storage-key`	`string`	`''`	Persist under this localStorage key; empty persists nothing.
`store`	Property only	`ThemePreferenceStore \| undefined`		A store of your own, instead of `storage-key`.
`apply`	`apply`	`boolean`	`false`	Theme this element's document on every change.

<mnw-theme-controls> events
Event	Description
`color-theme-change`	`{sourceColor?, mode}` after each change; no `sourceColor` means the page's own colors.

Marketing hub elements

`<mnw-android-screen>`

import 'material-next-web-components/marketing.js'; · class MaterialNextAndroidScreen · Android preview guide and demo

An app screen inside the App Toolkit shell, drawn as Compose draws it: status bar, app bar, the navigation the window's layout calls for (bar, rail, expanded rail or permanent drawer), the system navigation, and the modal drawer, modal rail, overflow menu and sheets over it. The app declares itself once with definePreviewApp(); each destination sets its tab, title, app bar and overlay. Which buttons appear comes from previewChrome(), never from the screen. Content stays in light DOM, so the app's own CSS applies to it. Without interactive (videos and captures) nothing reacts and nothing animates in: the shell renders the state it is given. Interactive, it never changes its own state; it asks the host:

<mnw-android-screen> properties
Property	Attribute	Type	Default	Description
`app`	Property only	`PreviewApp \| undefined`
`window`	Property only	`string \| WindowSpec \| undefined`		A window name (`phone`, `fold`, `desktop`) or size.
`navType`	`nav-type`	`'gesture' \| 'buttons'`	`'gesture'`
`tab`	`tab`	`string \| undefined`		The tab this destination belongs to, selected in the navigation.
`kind`	`kind`	`PreviewDestinationKind`	`'root'`
`besideList`	`beside-list`	`boolean`	`false`	A child open as the detail beside its tab's list: its tab stays marked in the navigation.
`heading`	`heading`	`string \| undefined`		The app bar title, overriding the shell's: a tab's root names the app, or the tab once the navigation beside it names the app; a child or page has no default.
`topBar`	`top-bar`	`PreviewTopBar`	`'small'`
`searchPlaceholder`	`search-placeholder`	`string`	`'Search'`
`searchValue`	`search-value`	`string`	`''`
`actions`	Property only	`PreviewAction[]`	`[]`
`navigation`	Property only	`PreviewNavigationState`	`{}`
`overlay`	Property only	`PreviewOverlay \| null`	`null`
`scrolled`	`scrolled`	`boolean`	`false`	The app bar and status bar take the scrolled colour.
`collapse`	`collapse`	`number \| undefined`		How far a large app bar has collapsed, 0 to 1, for screens that scroll from their state (captures). Unset, the bar follows the content's own scrolling.
`titleLines`	`title-lines`	`number`	`1`	A large title's lines before it ellipsises (an article's title wraps to two).
`scrollPosition`	`scroll-position`	`number \| undefined`		Where the content is scrolled to, for screens and captures that start scrolled. Applied when it changes; the person can scroll on from there.
`hideNavigationBar`	`hide-navigation-bar`	`boolean`	`false`	The navigation bar has hidden on scroll (HideOnScrollBottomBar): the content takes its place.
`interactive`	`interactive`	`boolean`	`false`	Live preview: reacts to input and animates overlays in. Off in videos and captures.

<mnw-android-screen> events
Event	Description
`type`
`preview-navigation`	`{patch}`: a PreviewNavigationState change (drawer, rail, menu).
`preview-tab`	`{tab}`: a tab was chosen.
`preview-entry`	`{entry}`: a drawer, rail or overflow entry was chosen.
`preview-back`	The app bar's or the system's Back.
`preview-search`	`{value}`: the tab's search text changed.
`preview-action`	`{id}`: an app bar action was pressed.
`preview-dismiss`	The overlay was dismissed: scrim, Escape or Back.
`preview-scroll`	`{scrollTop, scrollHeight, clientHeight, collapseHeight}`: the content scrolled.

<mnw-android-screen> slots
Slot	Description
Default	The destination's content.
`fab`	A floating action button, placed above the navigation bar and the system bars.
`bottom`	The destination's own bottom bar (Scaffold's `bottomBar`): an action row or a message field, between the content and the navigation bar.
`top`	Replaces the app bar, for a destination with its own (an article's).
`overlay`	The overlay's content (see `overlay`).

`<mnw-play-badge>`

import 'material-next-web-components/marketing.js'; · class MaterialNextPlayBadge · Store and source badges guide and demo

Google's official "Get it on Google Play" badge, unaltered. Size it with --mnw-play-badge-height; Google's guidelines allow scaling the artwork whole, never redrawing, recolouring, cropping or animating it. Pages that show it carry PLAY_TRADEMARK alongside their store links.

<mnw-play-badge> properties
Property	Attribute	Type	Default	Description
`href`	`href`	`string`	`''`	The app's Google Play listing.

<mnw-play-badge> CSS custom properties
Custom property	Description
`--mnw-play-badge-height`	Badge height, clear space included. Default `56px`.

`<mnw-github-badge>`

import 'material-next-web-components/marketing.js'; · class MaterialNextGithubBadge · Store and source badges guide and demo

A link to the app's source repository, with GitHub's mark.

<mnw-github-badge> properties
Property	Attribute	Type	Default	Description
`href`	`href`	`string`	`''`	Repository URL.
`label`	`label`	`string`	`'View source'`	Link text; with `compact`, the accessible name and tooltip.
`compact`	`compact`	`boolean`	`false`	Icon only, with the label kept for assistive technology.

`<mnw-device-frame>`

import 'material-next-web-components/marketing.js'; · class MaterialNextDeviceFrame · Device frame guide and demo

Google's device art around a slotted app screen: the Pixel 9 Pro XL for phones, the Pixel 9 Pro Fold open for tablets, the Pixelbook Go for desktop windows. The slotted screen stays in light DOM, so the app's CSS applies.

<mnw-device-frame> properties
Property	Attribute	Type	Default	Description
`device`	`device`	`DeviceName`	`'pixel_9_pro_xl'`	Which device: `pixel_9_pro_xl`, `pixel_9_pro_fold` or `pixelbook_go`.
`shadow`	`shadow`	`boolean`	`true`	Drop shadow under the device.
`tone`	`tone`	`'light' \| 'dark'`	`'light'`	Page tone behind the device, which tunes the shadow.

<mnw-device-frame> slots
Slot	Description
Default	The app screen, sized to the device's window.

`<mnw-marketing-shell>`

import 'material-next-web-components/marketing.js'; · class MaterialNextMarketingShell · Marketing shell guide and demo

A marketing hub composed with the shared app shell: a connected or closed drawer, product heading, preview settings behind a top app bar button, and screen catalog. A marketing page has no footer.

<mnw-marketing-shell> properties
Property	Attribute	Type	Default	Description
`product`	Property only	`MarketingProduct \| undefined`		The app the page presents. Required: nothing renders without it.
`settings`	Property only	`PreviewSettings`	`DEFAULT_PREVIEW_SETTINGS`	Current preview settings, shown by the preview controls.
`defaults`	Property only	`PreviewSettings`	`DEFAULT_PREVIEW_SETTINGS`	Settings that Reset returns to.
`palettes`	Property only	`readonly string[]`	`[]`	The app's palette names; empty hides the palette select.
`navigationMode`	`navigation-mode`	`'auto' \| 'none' \| AppShellNavigationMode`	`'modal'`	Drawer policy: automatic modal/permanent, always closed until opened, permanent, or `none`: no drawer and no menu button.
`permanentFrom`	`permanent-from`	`number`	`900`	Shell width from which the automatic drawer is permanent.
`settingsOpen`	`settings-open`	`boolean`	`false`	Whether the preview settings panel is open.

<mnw-marketing-shell> events
Event	Description
`settings-change`	From the preview controls.

<mnw-marketing-shell> slots
Slot	Description
Default	The `mnw-screen-card` elements.
`empty`	Shown when no cards are supplied.
`actions`	Top app bar actions, after the preview settings button: icon buttons, buttons or any custom element, for example `<mnw-product-launcher>`.
`navigation`	App-specific navigation; defaults to the screen catalog.
`extra`	App-specific sections after the catalog, for example motion parts.

`<mnw-marketing-top-app-bar>`

import 'material-next-web-components/marketing.js'; · class MaterialNextMarketingTopAppBar · Marketing top app bar guide and demo

The hub's identity-only top app bar: the app icon and name. It reflects scrolled while the page is scrolled, which gives it the raised container tone.

<mnw-marketing-top-app-bar> properties
Property	Attribute	Type	Default	Description
`name`	`name`	`string`	`''`	The app's name, linked to `href`.
`icon`	`icon`	`string`	`''`	URL of the app's icon, 32px; omitted when empty.
`href`	`href`	`string`	`'./'`	Where the brand links to.
`scrolled`	`scrolled`	`boolean`	`false`	Raised tone; set by the element while the window is scrolled.

`<mnw-preview-controls>`

import 'material-next-web-components/marketing.js'; · class MaterialNextPreviewControls · Preview controls guide and demo

The hub-wide preview settings: theme, system navigation, palette and the device frame, with a reset once anything differs from the defaults.

<mnw-preview-controls> properties
Property	Attribute	Type	Default	Description
`settings`	Property only	`PreviewSettings`	`DEFAULT_PREVIEW_SETTINGS`	The settings to show.
`defaults`	Property only	`PreviewSettings`	`DEFAULT_PREVIEW_SETTINGS`	Settings that Reset sends; Reset shows while `settings` differ from them.
`layout`	`layout`	`'bar' \| 'stacked'`	`'bar'`	`bar`: one wrapping row. `stacked`: one control per row, full width, for a panel.
`palettes`	Property only	`readonly string[]`	`[]`	The app's palette names; "As captured" is always offered first.

<mnw-preview-controls> events
Event	Description
`settings-change`	The new settings, as `detail`.

`<mnw-prototype-layout>`

import 'material-next-web-components/marketing.js'; · class MaterialNextPrototypeLayout · Prototype layout guide and demo

The prototype page's frame: a side panel on the leading side, where the back button and the controls start, and a stage for the live screen.

<mnw-prototype-layout> slots
Slot	Description
`stage`	Light-DOM container the screen hosts render into.
`panel`	Usually an `mnw-screen-inspector`.

`<mnw-screen-card>`

import 'material-next-web-components/marketing.js'; · class MaterialNextScreenCard · Screen card guide and demo

One screen in the catalog. The live screen goes in the default slot and stays in light DOM, so the app's own CSS and palette reach it.

<mnw-screen-card> properties
Property	Attribute	Type	Default	Description
`heading`	`heading`	`string`	`''`	The screen's title, linked to `href`.
`description`	`description`	`string`	`''`	One or two sentences under the title.
`tag`	`tag`	`string`	`''`	Short category label.
`href`	`href`	`string`	`''`	The prototype page for this screen.
`framed`	`framed`	`boolean`	`false`	The preview is inside a device frame.
`dark`	`dark`	`boolean`	`false`	State of the dark theme toggle.
`threeButton`	`three-button`	`boolean`	`false`	State of the 3-button navigation toggle.

<mnw-screen-card> events
Event	Description
`card-theme-toggle`	`{selected}`: dark theme on this card only.
`card-nav-toggle`	`{selected}`: 3-button navigation on this card only.

<mnw-screen-card> slots
Slot	Description
Default	The screen's mount element.

<mnw-screen-card> CSS custom properties
Custom property	Description
`--mnw-card-preview-height`	Height of a frameless preview. Default `clamp(560px, 75dvh, 760px)`.
`--mnw-card-device-zoom`	Scale of a framed preview. Default `0.66`.
`--mnw-card-index`	Position in the grid, staggering the entrance animation (capped at 6).

`<mnw-screen-inspector>`

import 'material-next-web-components/marketing.js'; · class MaterialNextScreenInspector · Screen inspector guide and demo

The prototype page's side panel: the screen's details, the view options and the screen's own controls and presets.

<mnw-screen-inspector> properties
Property	Attribute	Type	Default	Description
`screen`	Property only	`MarketingScreen \| undefined`		The screen shown. Nothing renders without it.
`screens`	Property only	`readonly MarketingScreen[]`	`[]`	Every screen, for the screen picker.
`view`	Property only	`PrototypeView`	`DEFAULT_PROTOTYPE_VIEW`	The prototype view: mode, theme, navigation, window, palettes, frame.
`palettes`	Property only	`readonly string[]`	`[]`	The app's palette names; empty hides the palette selects.
`state`	Property only	`ScreenState`	`{}`	The live screen's state, for the controls' current values.
`galleryHref`	`gallery-href`	`string`	`'./'`	Where "All screens" links.
`captureHref`	`capture-href`	`string`	`''`	Opens the bare screen for captures.
`adsToggle`	`ads-toggle`	`boolean`	`false`	Offer the ad stand-ins switch (apps with ads only).

<mnw-screen-inspector> events
Event	Description
`view-change`	`Partial<PrototypeView>` to apply.
`screen-select`	`{id}` of the screen to open.
`state-patch`	`{patch}` for the screen's state.
`state-reset`	Back to the screen's defaults.

Documentation layout

`<mnw-docs-page>`

import 'material-next-web-components/docs-page.js'; · class MaterialNextDocsPage · Docs shell and page guide and demo

Centers documentation content with Material documentation spacing.

<mnw-docs-page> slots
Slot	Description
Default	Page content.

<mnw-docs-page> CSS custom properties
Custom property	Description
`--mnw-docs-page-max-width`	Maximum content width. Default `1120px`.
`--mnw-docs-page-inline-gutter`	Total inline space kept free. Default `32px`.
`--mnw-docs-page-padding-block`	Top padding. Default `32px`, `24px` below 820px.

`<mnw-docs-shell>`

import 'material-next-web-components/docs-shell.js'; · class MaterialNextDocsShell · Docs shell and page guide and demo

Application shell for Material Next documentation pages: a navigation slot, the main landmark and a footer, in a full-height column.

<mnw-docs-shell> slots
Slot	Description
`nav`	Top app bar, usually an `mnw-docs-top-app-bar`.
Default	Page content, rendered inside `<main>`.
`footer`	Footer content.

`<mnw-docs-table-of-contents>`

import 'material-next-web-components/docs-table-of-contents.js'; · class MaterialNextDocsTableOfContents · Docs navigation guide and demo

"On this page" links for a documentation page. The active link has aria-current="page".

<mnw-docs-table-of-contents> properties
Property	Attribute	Type	Default	Description
`ariaLabel`	`aria-label`	`string`	`'Table of contents'`	Accessible name of the navigation landmark.
`heading`	`heading`	`string`	`'On this page'`	Visible heading above the items; an empty string hides it.
`items`	Property only	`DocsNavigationItem[]`	`exampleTableOfContentsItems`	The items, as `{label, href, icon?}` objects. JavaScript property. The default is four placeholder `#` anchors; always set it or `items-json`.
`activeIndex`	`active-index`	`number`	`0`	Index of the current item. Set by clicks; set it yourself when routing.
`itemsJson`	`items-json`	`string`	`''`	The items as a JSON string, for server-rendered HTML. Invalid JSON, or entries without a string `label` and `href`, are ignored.

<mnw-docs-table-of-contents> events
Event	Description
`navigate`	`{index, item}` when an item is clicked, after it becomes active. Cancelable: `preventDefault()` keeps the browser from following the link, for routing in JavaScript.

`<mnw-docs-top-app-bar>`

import 'material-next-web-components/docs-top-app-bar.js'; · class MaterialNextDocsTopAppBar · Docs shell and page guide and demo

Sticky Material documentation app bar with leading, navigation, and trailing slots. Below 960px the navigation moves to a scrolling row under the brand and actions; below 600px the bar scrolls away with the page.

<mnw-docs-top-app-bar> slots
Slot	Description
`leading`	Brand or logo link.
Default	Primary navigation, for example `md-tabs` with links.
`trailing`	Actions such as a repository link.

`<mnw-docs-vertical-tabs>`

import 'material-next-web-components/docs-vertical-tabs.js'; · class MaterialNextDocsVerticalTabs · Docs navigation guide and demo

Vertical navigation list for documentation sections, built on Material Web list items. Each item is a link; the active one has aria-current="page".

<mnw-docs-vertical-tabs> properties
Property	Attribute	Type	Default	Description
`ariaLabel`	`aria-label`	`string`	`'Documentation sections'`	Accessible name of the navigation landmark.
`heading`	`heading`	`string`	`'Elements'`	Visible heading above the items; an empty string hides it.
`items`	Property only	`DocsNavigationItem[]`	`exampleNavigationItems`	The items, as `{label, href, icon?}` objects. JavaScript property. The default is three placeholder example links; always set it or `items-json`.
`activeIndex`	`active-index`	`number`	`0`	Index of the current item. Set by clicks; set it yourself when routing.
`itemsJson`	`items-json`	`string`	`''`	The items as a JSON string, for server-rendered HTML. Invalid JSON, or entries without a string `label` and `href`, are ignored.

<mnw-docs-vertical-tabs> events
Event	Description
`navigate`	`{index, item}` when an item is clicked, after it becomes active. Cancelable: `preventDefault()` keeps the browser from following the link, for routing in JavaScript.

`<mnw-app-shell-footer>`

import 'material-next-web-components/app-shell.js'; · class MaterialNextAppShellFooter · Drawer footer guide and demo

Drawer footer with a theme selector and optional policy links, matching the Android Insider and GitHub Dev Tools footers. The host applies the theme.

<mnw-app-shell-footer> properties
Property	Attribute	Type	Default	Description
`theme`	`theme`	`AppShellTheme`	`'system'`	Selected theme; the host owns persistence and colour tokens.
`privacyHref`	`privacy-href`	`string`	`''`	Privacy policy URL; empty hides the link.
`codeOfConductHref`	`code-of-conduct-href`	`string`	`''`	Code of conduct URL; empty hides the link.

<mnw-app-shell-footer> events
Event	Description
`theme-change`	`{theme}`: the requested Light, Dark or System theme.