mprovok · Sep 20, 2026 · Sep 19, 2026 · Sep 19, 2026 · Sep 20, 2026 · Sep 20, 2026
diff --git a/.changeset/cyan-laws-bow.md b/.changeset/cyan-laws-bow.md
@@ -0,0 +1,5 @@
+---
+'@solidmaterial/material': minor
+---
+
+Add separate components for leading buttons in app bar
diff --git a/.changeset/forty-kiwis-jump.md b/.changeset/forty-kiwis-jump.md
@@ -0,0 +1,5 @@
+---
+'@solidmaterial/calculator': patch
+---
+
+Use new component for back button in app bar
diff --git a/.changeset/green-rice-melt.md b/.changeset/green-rice-melt.md
@@ -0,0 +1,5 @@
+---
+'@solidmaterial/landing-page': patch
+---
+
+Avoid unstable text reflow in hero section when changing the orientation on mobile
diff --git a/.changeset/long-horses-rule.md b/.changeset/long-horses-rule.md
@@ -0,0 +1,5 @@
+---
+'@solidmaterial/landing-page': minor
+---
+
+Add app bars with menu button to pages
diff --git a/.changeset/seven-pans-speak.md b/.changeset/seven-pans-speak.md
@@ -0,0 +1,5 @@
+---
+'@solidmaterial/landing-page': patch
+---
+
+Use new component for back button in app bar
diff --git a/.changeset/tricky-keys-act.md b/.changeset/tricky-keys-act.md
@@ -0,0 +1,5 @@
+---
+'@solidmaterial/material': patch
+---
+
+Fix modal hidden navigation rail blinking when navigating to a page
diff --git a/apps/calculator/src/routes/about.tsx b/apps/calculator/src/routes/about.tsx
@@ -5,7 +5,7 @@ import favIconUrl from '/assets/favicon.svg?url&no-inline';
 //
 import { MetaProvider, Title } from '@solidjs/meta';
 import { useNavigate } from '@solidjs/router';
-import { MaterialAppBar } from '@solidmaterial/material/components/app-bar';
+import { MaterialAppBar, MaterialAppBarBackButton } from '@solidmaterial/material/components/app-bar';
 import { H2, H3 } from '@solidmaterial/material/components/typography';
 import { MaterialBodyLayout, MaterialPane } from '@solidmaterial/material/layouts';
 
@@ -24,7 +24,11 @@ const RouteAbout: Component = () => {
       </MetaProvider>
       <MaterialBodyLayout variant="flexible-fixed">
         <MaterialPane>
-          <MaterialAppBar variant="small" title="About" leadingButtonAriaLabel="Go back" onNavigate={navigateBack} />
+          <MaterialAppBar
+            variant="small"
+            title="About"
+            leadingButton={<MaterialAppBarBackButton title="Go back" onClick={navigateBack} />}
+          />
           <main class={styles['main']}>
             <img src={favIconUrl} alt="logo" class={styles['logo']} />
             <H2 role="display" size="small">

diff --git a/apps/calculator/src/routes/settings.tsx b/apps/calculator/src/routes/settings.tsx
@@ -3,7 +3,7 @@ import type { Component, VoidComponent } from 'solid-js';
 
 import { MetaProvider, Title } from '@solidjs/meta';
 import { useNavigate } from '@solidjs/router';
-import { MaterialAppBar } from '@solidmaterial/material/components/app-bar';
+import { MaterialAppBar, MaterialAppBarBackButton } from '@solidmaterial/material/components/app-bar';
 import { MaterialButton } from '@solidmaterial/material/components/button';
 import { MaterialDialog } from '@solidmaterial/material/components/dialog';
 import { MaterialIcon } from '@solidmaterial/material/components/icon';
@@ -99,7 +99,11 @@ const RouteSettings: Component = () => {
       </MaterialDialog>
       <MaterialBodyLayout variant="flexible-fixed">
         <MaterialPane>
-          <MaterialAppBar variant="small" title="Settings" leadingButtonAriaLabel="Go back" onNavigate={navigateBack} />
+          <MaterialAppBar
+            variant="small"
+            title="Settings"
+            leadingButton={<MaterialAppBarBackButton title="Go back" onClick={navigateBack} />}
+          />
           <main class={styles['main']}>
             <H2 role="title" size="small">
               Theme

diff --git a/apps/landing-page/src/examples/calculator/Calculator.tsx b/apps/landing-page/src/examples/calculator/Calculator.tsx
@@ -1,7 +1,7 @@
 import type { VoidComponent } from 'solid-js';
 
 import { useNavigate } from '@solidjs/router';
-import { MaterialAppBar } from '@solidmaterial/material/components/app-bar';
+import { MaterialAppBar, MaterialAppBarBackButton } from '@solidmaterial/material/components/app-bar';
 import { MaterialIconButton } from '@solidmaterial/material/components/icon-button';
 import { Breakpoints } from '@solidmaterial/material/utils';
 import { createSignal } from 'solid-js';
@@ -31,7 +31,7 @@ export const Calculator: VoidComponent<ExampleProps> = props => {
       <MaterialAppBar
         variant={isMobile() ? 'small' : 'large'}
         title={props.data.label}
-        leadingButtonAriaLabel="Go back to list"
+        leadingButton={<MaterialAppBarBackButton title="Go back to list" onClick={navigateBackToList} />}
         trailingButtons={
           <MaterialIconButton
             variant="text"
@@ -41,7 +41,6 @@ export const Calculator: VoidComponent<ExampleProps> = props => {
             target="_blank"
           />
         }
-        onNavigate={navigateBackToList}
       />
       <main class={styles['main']}>
         <VibrateContext.Provider value={[isVibrate, setVibrate]}>

diff --git a/apps/landing-page/src/examples/todo-list/TodoList.tsx b/apps/landing-page/src/examples/todo-list/TodoList.tsx
@@ -1,7 +1,7 @@
 import type { VoidComponent } from 'solid-js';
 
 import { useNavigate } from '@solidjs/router';
-import { MaterialAppBar } from '@solidmaterial/material/components/app-bar';
+import { MaterialAppBar, MaterialAppBarBackButton } from '@solidmaterial/material/components/app-bar';
 import { MaterialButton } from '@solidmaterial/material/components/button';
 import { MaterialCheckbox } from '@solidmaterial/material/components/checkbox';
 import { MaterialIconButton } from '@solidmaterial/material/components/icon-button';
@@ -68,8 +68,7 @@ export const TodoList: VoidComponent<ExampleProps> = props => {
       <MaterialAppBar
         variant={isMobile() ? 'small' : 'large'}
         title={props.data.label}
-        leadingButtonAriaLabel="Go back to list"
-        onNavigate={navigateBackToList}
+        leadingButton={<MaterialAppBarBackButton title="Go back to list" onClick={navigateBackToList} />}
       />
       <main class={styles['main']}>
         <form action="" method="dialog" onSubmit={onSubmit} class={styles['form']}>

diff --git a/apps/landing-page/src/pages/home/sections/hero/SectionHero.module.css b/apps/landing-page/src/pages/home/sections/hero/SectionHero.module.css
@@ -12,6 +12,12 @@
   transition-duration: var(--md-sys-motion-duration-spatial-fast);
   transition-timing-function: var(--md-sys-motion-spring-spatial-fast);
 
+  /* Avoid unstable text reflow when changing the orientation on mobile */
+  @media (width < 600px) or (height < 480px) {
+    transition-duration: var(--md-sys-motion-duration-standard-spatial-fast);
+    transition-timing-function: var(--md-sys-motion-spring-standard-spatial-fast);
+  }
+
   padding: var(--md-user-spacing-4xl);
   gap: var(--md-user-spacing-2xl);
 

diff --git a/apps/landing-page/src/routes/components/[[name]].module.css b/apps/landing-page/src/routes/components/[[name]].module.css
@@ -1,11 +1,20 @@
 .list-pane {
   --md-comp-pane-container-color: var(--md-sys-color-surface-container-low);
 
-  h1 {
-    margin-block-end: var(--md-user-spacing-md);
-  }
+  --md-comp-app-bar-container-color: transparent;
+
+  aside {
+    h1 {
+      margin-block-end: var(--md-user-spacing-md);
+    }
 
-  sm-list + h1 {
-    margin-block-start: var(--md-user-spacing-xl);
+    sm-list + h1 {
+      margin-block-start: var(--md-user-spacing-xl);
+    }
   }
 }
+
+/* Adjust app bar container color when it's not the only pane */
+sm-body-layout:not(:has(> :only-child)) .list-pane {
+  --md-comp-app-bar-on-scroll-container-color: var(--md-comp-pane-container-color);
+}
diff --git a/apps/landing-page/src/routes/components/[[name]].tsx b/apps/landing-page/src/routes/components/[[name]].tsx
@@ -2,8 +2,13 @@ import type { Component } from 'solid-js';
 
 import { MetaProvider, Title } from '@solidjs/meta';
 import { useParams } from '@solidjs/router';
+import { MaterialAppBar } from '@solidmaterial/material/components/app-bar';
 import { H1 } from '@solidmaterial/material/components/typography';
-import { MaterialListDetailLayout, MaterialPane } from '@solidmaterial/material/layouts';
+import {
+  MaterialListDetailLayout,
+  MaterialNavigationRailLayoutMenuButton,
+  MaterialPane
+} from '@solidmaterial/material/layouts';
 import { Show, createMemo } from 'solid-js';
 
 import { EmptyState } from '../../components/empty-state/EmptyState';
@@ -43,32 +48,39 @@ const PageComponents: Component = () => {
       </MetaProvider>
       <MaterialListDetailLayout selected={params.name !== undefined}>
         <MaterialPane class={styles['list-pane']}>
-          <aside>
-            <H1 role="label" size="large">
-              Components
-            </H1>
-            <ComponentList items={COMPONENTS} name={params.name} />
-            <H1 role="label" size="large">
-              Buttons
-            </H1>
-            <ComponentList items={BUTTONS} name={params.name} />
-            <H1 role="label" size="large">
-              Controls
-            </H1>
-            <ComponentList items={CONTROLS} name={params.name} />
-            <H1 role="label" size="large">
-              Navigation
-            </H1>
-            <ComponentList items={NAVIGATION} name={params.name} />
-            <H1 role="label" size="large">
-              Layout
-            </H1>
-            <ComponentList items={LAYOUT} name={params.name} />
-            <H1 role="label" size="large">
-              Utilities
-            </H1>
-            <ComponentList items={UTILITIES} name={params.name} />
-          </aside>
+          <div>
+            <MaterialAppBar
+              variant="small"
+              title="Components"
+              leadingButton={<MaterialNavigationRailLayoutMenuButton title="Open menu" titleSelected="Close menu" />}
+            />
+            <aside>
+              <H1 role="label" size="large">
+                Components
+              </H1>
+              <ComponentList items={COMPONENTS} name={params.name} />
+              <H1 role="label" size="large">
+                Buttons
+              </H1>
+              <ComponentList items={BUTTONS} name={params.name} />
+              <H1 role="label" size="large">
+                Controls
+              </H1>
+              <ComponentList items={CONTROLS} name={params.name} />
+              <H1 role="label" size="large">
+                Navigation
+              </H1>
+              <ComponentList items={NAVIGATION} name={params.name} />
+              <H1 role="label" size="large">
+                Layout
+              </H1>
+              <ComponentList items={LAYOUT} name={params.name} />
+              <H1 role="label" size="large">
+                Utilities
+              </H1>
+              <ComponentList items={UTILITIES} name={params.name} />
+            </aside>
+          </div>
         </MaterialPane>
 
         <MaterialPane>

diff --git a/apps/landing-page/src/routes/examples/[[name]].module.css b/apps/landing-page/src/routes/examples/[[name]].module.css
@@ -1,3 +1,10 @@
 .list-pane {
   --md-comp-pane-container-color: var(--md-sys-color-surface-container-low);
+
+  --md-comp-app-bar-container-color: transparent;
+}
+
+/* Adjust app bar container color when it's not the only pane */
+sm-body-layout:not(:has(> :only-child)) .list-pane {
+  --md-comp-app-bar-on-scroll-container-color: var(--md-comp-pane-container-color);
 }
diff --git a/apps/landing-page/src/routes/examples/[[name]].tsx b/apps/landing-page/src/routes/examples/[[name]].tsx
@@ -3,7 +3,12 @@ import type { ParentComponent } from 'solid-js';
 
 import { MetaProvider, Title } from '@solidjs/meta';
 import { useParams } from '@solidjs/router';
-import { MaterialListDetailLayout, MaterialPane } from '@solidmaterial/material/layouts';
+import { MaterialAppBar } from '@solidmaterial/material/components/app-bar';
+import {
+  MaterialListDetailLayout,
+  MaterialNavigationRailLayoutMenuButton,
+  MaterialPane
+} from '@solidmaterial/material/layouts';
 import { Show, createMemo } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
 
@@ -33,9 +38,16 @@ const PageExamples: ParentComponent = () => {
         }
       >
         <MaterialPane class={styles['list-pane']}>
-          <aside>
-            <ExampleList name={params.name} />
-          </aside>
+          <div>
+            <MaterialAppBar
+              variant="small"
+              title="Examples"
+              leadingButton={<MaterialNavigationRailLayoutMenuButton title="Open menu" titleSelected="Close menu" />}
+            />
+            <aside>
+              <ExampleList name={params.name} />
+            </aside>
+          </div>
         </MaterialPane>
         <MaterialPane>
           <Show

diff --git a/apps/landing-page/src/routes/get-started.tsx b/apps/landing-page/src/routes/get-started.tsx
@@ -1,10 +1,13 @@
 import type { Component } from 'solid-js';
 
 import { MetaProvider, Title } from '@solidjs/meta';
-import { useNavigate } from '@solidjs/router';
 import { MaterialAppBar } from '@solidmaterial/material/components/app-bar';
 import { H2, H3, Span } from '@solidmaterial/material/components/typography';
-import { MaterialBodyLayout, MaterialPane } from '@solidmaterial/material/layouts';
+import {
+  MaterialBodyLayout,
+  MaterialNavigationRailLayoutMenuButton,
+  MaterialPane
+} from '@solidmaterial/material/layouts';
 import { Breakpoints } from '@solidmaterial/material/utils';
 import { createSignal } from 'solid-js';
 
@@ -22,9 +25,6 @@ import { PromptBlock } from '../components/prompt-block/PromptBlock';
 import styles from './get-started.module.css';
 
 const PageGetStarted: Component = () => {
-  const navigate = useNavigate();
-  const navigateBackToList = () => navigate('..', { state: { transition: 'top-level' } });
-
   const isMobile = () => Breakpoints.isCompactWidth();
 
   const [activeTab, setActiveTab] = createSignal<'pnpm' | 'yarn' | 'npm'>('pnpm');
@@ -39,8 +39,7 @@ const PageGetStarted: Component = () => {
           <MaterialAppBar
             variant={isMobile() ? 'small' : 'large'}
             title="Getting started"
-            leadingButtonAriaLabel="Go back to list"
-            onNavigate={navigateBackToList}
+            leadingButton={<MaterialNavigationRailLayoutMenuButton title="Open menu" titleSelected="Close menu" />}
           />
           <main class={styles['main']}>
             <Span role="body" size="large">

diff --git a/apps/landing-page/src/routes/index.tsx b/apps/landing-page/src/routes/index.tsx
@@ -4,7 +4,11 @@ import { MetaProvider, Title } from '@solidjs/meta';
 import { MaterialAppBar } from '@solidmaterial/material/components/app-bar';
 import { MaterialIconButton } from '@solidmaterial/material/components/icon-button';
 import { H2 } from '@solidmaterial/material/components/typography';
-import { MaterialBodyLayout, MaterialPane } from '@solidmaterial/material/layouts';
+import {
+  MaterialBodyLayout,
+  MaterialNavigationRailLayoutMenuButton,
+  MaterialPane
+} from '@solidmaterial/material/layouts';
 import { createSignal } from 'solid-js';
 
 /* Used as a social button to link to GitHub project (see https://brand.github.com/foundations/logo) */
@@ -39,6 +43,7 @@ const PageHome: Component = () => {
           <MaterialAppBar
             variant="small"
             title="Solid Material"
+            leadingButton={<MaterialNavigationRailLayoutMenuButton title="Open menu" titleSelected="Close menu" />}
             trailingButtons={
               <>
                 <MaterialIconButton

diff --git a/packages/material/src/components/app-bar/MaterialAppBar.module.css b/packages/material/src/components/app-bar/MaterialAppBar.module.css
@@ -99,12 +99,12 @@
     padding-inline: var(--md-comp-app-bar-leading-space) var(--md-comp-app-bar-trailing-space);
 
     /* Align small text with text in appendix if there is no leading icon button */
-    &:not(:has(.back-button)) {
+    &:not(:has(.leading-button:not(:empty))) {
       grid-template-columns: auto min-content;
       padding-inline-start: var(--md-user-spacing-md);
     }
 
-    .back-button {
+    .leading-button {
       --sm-icon-button-icon-color: var(--md-comp-app-bar-leading-icon-color);
 
       &:dir(rtl) {
@@ -138,14 +138,18 @@
       gap: var(--md-comp-app-bar-icon-button-space);
     }
 
-    .back-button,
+    .leading-button,
     .trailing-buttons {
       display: grid;
       place-items: center;
       grid-auto-flow: column;
       grid-auto-columns: minmax(48px, auto);
       height: 48px;
     }
+
+    .leading-button:empty {
+      display: none;
+    }
   }
 
   .app-bar-background {