ionic-team · brandyscarney · Mar 24, 2026 · Mar 24, 2026 · Mar 24, 2026 · Mar 24, 2026
@@ -2754,6 +2754,7 @@ ion-toolbar,shadow
 ion-toolbar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-toolbar,prop,mode,"ios" | "md",undefined,false,false
 ion-toolbar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
+ion-toolbar,prop,titlePlacement,"center" | "end" | "start" | undefined,undefined,false,false
 ion-toolbar,css-prop,--background,ionic
 ion-toolbar,css-prop,--background,ios
 ion-toolbar,css-prop,--background,md

@@ -4463,6 +4463,10 @@ export namespace Components {
           * The theme determines the visual appearance of the component.
          */
         "theme"?: "ios" | "md" | "ionic";
+        /**
+          * Where to place the title relative to the other toolbar content. `"start"`: The title will appear to the left of the toolbar content in LTR and to the right in RTL. `"center"`: The title will appear in the center of the toolbar. `"end"`: The title will appear to the right of the toolbar content in LTR and to the left in RTL.
+         */
+        "titlePlacement"?: 'start' | 'center' | 'end';
     }
 }
 export interface IonAccordionGroupCustomEvent<T> extends CustomEvent<T> {
@@ -10590,6 +10594,10 @@ declare namespace LocalJSX {
           * The theme determines the visual appearance of the component.
          */
         "theme"?: "ios" | "md" | "ionic";
+        /**
+          * Where to place the title relative to the other toolbar content. `"start"`: The title will appear to the left of the toolbar content in LTR and to the right in RTL. `"center"`: The title will appear in the center of the toolbar. `"end"`: The title will appear to the right of the toolbar content in LTR and to the left in RTL.
+         */
+        "titlePlacement"?: 'start' | 'center' | 'end';
     }
 
     interface IonAccordionAttributes {
@@ -11382,6 +11390,7 @@ declare namespace LocalJSX {
     }
     interface IonToolbarAttributes {
         "color": Color;
+        "titlePlacement": 'start' | 'center' | 'end';
     }
 
     interface IntrinsicElements {

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Toolbar - Title Placement</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header id="default-placement">
+        <ion-toolbar>
+          <ion-title>Default Placement</ion-title>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button>
+              <ion-icon slot="icon-only" name="menu"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Default Placement</ion-title>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-title>Default Placement</ion-title>
+          <ion-buttons slot="primary">
+            <ion-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-header>
+        <ion-toolbar title-placement="start">
+          <ion-title>Start Placement</ion-title>
+        </ion-toolbar>
+        <ion-toolbar title-placement="start">
+          <ion-buttons slot="start">
+            <ion-button>
+              <ion-icon slot="icon-only" name="menu"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Start Placement</ion-title>
+        </ion-toolbar>
+        <ion-toolbar title-placement="start">
+          <ion-title>Start Placement</ion-title>
+          <ion-buttons slot="primary">
+            <ion-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-header>
+        <ion-toolbar title-placement="center">
+          <ion-title>Center Placement</ion-title>
+        </ion-toolbar>
+        <ion-toolbar title-placement="center">
+          <ion-buttons slot="start">
+            <ion-button>
+              <ion-icon slot="icon-only" name="menu"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Center Placement</ion-title>
+        </ion-toolbar>
+        <ion-toolbar title-placement="center">
+          <ion-title>Center Placement</ion-title>
+          <ion-buttons slot="primary">
+            <ion-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-header>
+        <ion-toolbar title-placement="end">
+          <ion-title>End Placement</ion-title>
+        </ion-toolbar>
+        <ion-toolbar title-placement="end">
+          <ion-buttons slot="start">
+            <ion-button>
+              <ion-icon slot="icon-only" name="menu"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>End Placement</ion-title>
+        </ion-toolbar>
+        <ion-toolbar title-placement="end">
+          <ion-title>End Placement</ion-title>
+          <ion-buttons slot="primary">
+            <ion-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-footer>
+        <ion-button onclick="toggleTitlePlacement('start')">Start</ion-button>
+        <ion-button onclick="toggleTitlePlacement('center')">Center</ion-button>
+        <ion-button onclick="toggleTitlePlacement('end')">End</ion-button>
+      </ion-footer>
+    </ion-app>
+
+    <script>
+      const defaultPlacementToolbars = document.querySelectorAll('#default-placement ion-toolbar');
+
+      function toggleTitlePlacement(placement) {
+        defaultPlacementToolbars.forEach((toolbar) => {
+          toolbar.titlePlacement = placement;
+        });
+      }
+    </script>
+
+    <style>
+      ion-footer {
+        display: flex;
+
+        justify-content: center;
+        align-items: center;
+
+        gap: 10px;
+        padding: 8px;
+      }
+    </style>
+  </body>
+</html>
@@ -0,0 +1,45 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Title placement is only supported by the `ionic` theme.
+ */
+configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toolbar: title-placement'), () => {
+    ['start', 'center', 'end'].forEach((placement) => {
+      test(`should not have visual regressions with ${placement} placement`, async ({ page }) => {
+        const placementTitle = placement.charAt(0).toUpperCase() + placement.slice(1);
+
+        await page.setContent(
+          `
+              <ion-header>
+                <ion-toolbar title-placement="${placement}">
+                  <ion-title>${placementTitle} Placement</ion-title>
+                </ion-toolbar>
+                <ion-toolbar title-placement="${placement}">
+                  <ion-buttons slot="start">
+                    <ion-button>
+                      <ion-icon slot="icon-only" name="menu"></ion-icon>
+                    </ion-button>
+                  </ion-buttons>
+                  <ion-title>${placementTitle} Placement</ion-title>
+                </ion-toolbar>
+                <ion-toolbar title-placement="${placement}">
+                  <ion-title>${placementTitle} Placement</ion-title>
+                  <ion-buttons slot="primary">
+                    <ion-button>
+                      <ion-icon slot="icon-only" name="search"></ion-icon>
+                    </ion-button>
+                  </ion-buttons>
+                </ion-toolbar>
+              </ion-header>
+            `,
+          config
+        );
+
+        const header = page.locator('ion-header');
+        await expect(header).toHaveScreenshot(screenshot(`toolbar-title-placement-${placement}`));
+      });
+    });
+  });
+});
@@ -59,10 +59,6 @@
   @include globals.padding-horizontal(globals.$ion-space-200);
 }
 
-:host(.toolbar-title-default) ::slotted(ion-title) {
-  text-align: center;
-}
-
 :host(.toolbar-title-large) ::slotted(ion-title) {
   @include globals.padding-horizontal(globals.$ion-space-400);
 }
@@ -116,3 +112,18 @@
 
   flex: 0 0 var(--primary-secondary-size, 0);
 }
+
+// Toolbar Title Placement
+// --------------------------------------------------
+
+:host(.toolbar-title-placement-start) ::slotted(ion-title) {
+  text-align: start;
+}
+
+:host(.toolbar-title-placement-center) ::slotted(ion-title) {
+  text-align: center;
+}
+
+:host(.toolbar-title-placement-end) ::slotted(ion-title) {
+  text-align: end;
+}
@@ -1,5 +1,5 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Element, forceUpdate, h, Host, Listen, Prop } from '@stencil/core';
+import { Component, Element, forceUpdate, h, Host, Listen, Prop, Watch } from '@stencil/core';
 import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonTheme } from '../../global/ionic-global';
@@ -30,6 +30,14 @@ import type { Color, CssClassMap, StyleEventDetail } from '../../interface';
 })
 export class Toolbar implements ComponentInterface {
   private childrenStyles = new Map<string, CssClassMap>();
+  private readonly slotClasses = [
+    'has-start-content',
+    'has-end-content',
+    'has-primary-content',
+    'has-secondary-content',
+  ];
+  private readonly showClasses = ['show-start', 'show-end', 'show-primary', 'show-secondary'];
+  private readonly slotSizeVars = ['--start-end-size', '--primary-secondary-size'];
 
   @Element() el!: HTMLIonToolbarElement;
 
@@ -40,6 +48,14 @@ export class Toolbar implements ComponentInterface {
    */
   @Prop({ reflect: true }) color?: Color;
 
+  /**
+   * Where to place the title relative to the other toolbar content.
+   * `"start"`: The title will appear to the left of the toolbar content in LTR and to the right in RTL.
+   * `"center"`: The title will appear in the center of the toolbar.
+   * `"end"`: The title will appear to the right of the toolbar content in LTR and to the left in RTL.
+   */
+  @Prop() titlePlacement?: 'start' | 'center' | 'end';
+
   componentWillLoad() {
     const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
 
@@ -67,6 +83,24 @@ export class Toolbar implements ComponentInterface {
     this.updateSlotWidths();
   }
 
+  @Watch('titlePlacement')
+  titlePlacementChanged() {
+    this.updateSlotClasses();
+  }
+
+  /**
+   * Gets the title placement.
+   * Returns the title placement if it is set, otherwise returns `"center"`
+   * for `ionic` and `ios`, and `"start"` for `md`.
+   */
+  private getTitlePlacement(): 'start' | 'center' | 'end' {
+    if (this.titlePlacement !== undefined) {
+      return this.titlePlacement;
+    }
+
+    return getIonTheme(this) === 'ionic' || getIonTheme(this) === 'ios' ? 'center' : 'start';
+  }
+
   /**
    * Updates the CSS custom properties for slot widths
    * This ensures that slots shown by their met conditions
@@ -164,7 +198,21 @@ export class Toolbar implements ComponentInterface {
     return allMeasurementsSuccessful;
   }
 
+  /**
+   * Removes all slot visibility classes and slot width CSS variables.
+   */
+  private removeSlotClasses() {
+    this.el.classList.remove(...this.slotClasses, ...this.showClasses);
+    this.slotSizeVars.forEach((cssVar) => this.el.style.removeProperty(cssVar));
+  }
+
   private updateSlotClasses() {
+    const titlePlacement = this.getTitlePlacement();
+    if (titlePlacement !== 'center') {
+      this.removeSlotClasses();
+      return;
+    }
+
     // Check if slots have content
     const slots = ['start', 'end', 'primary', 'secondary'];
 
@@ -250,12 +298,15 @@ export class Toolbar implements ComponentInterface {
       Object.assign(childStyles, style);
     });
 
+    const titlePlacement = this.getTitlePlacement();
+
     return (
       <Host
         class={{
           ...createColorClasses(this.color, {
             [theme]: true,
             'in-toolbar': hostContext('ion-toolbar', this.el),
+            [`toolbar-title-placement-${titlePlacement}`]: true,
           }),
           ...childStyles,
         }}

@@ -2636,14 +2636,14 @@ This event will not emit when programmatically setting the `checked` property.
 
 
 @ProxyCmp({
-  inputs: ['color', 'mode', 'theme']
+  inputs: ['color', 'mode', 'theme', 'titlePlacement']
 })
 @Component({
   selector: 'ion-toolbar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'mode', 'theme'],
+  inputs: ['color', 'mode', 'theme', 'titlePlacement'],
 })
 export class IonToolbar {
   protected el: HTMLIonToolbarElement;

@@ -2298,14 +2298,14 @@ Shorthand for ionToastDidDismiss.
 
 @ProxyCmp({
   defineCustomElementFn: defineIonToolbar,
-  inputs: ['color', 'mode', 'theme']
+  inputs: ['color', 'mode', 'theme', 'titlePlacement']
 })
 @Component({
   selector: 'ion-toolbar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'mode', 'theme'],
+  inputs: ['color', 'mode', 'theme', 'titlePlacement'],
   standalone: true
 })
 export class IonToolbar {

@@ -1122,6 +1122,7 @@ export const IonToggle: StencilVueComponent<JSX.IonToggle, JSX.IonToggle["checke
 
 
 export const IonToolbar: StencilVueComponent<JSX.IonToolbar> = /*@__PURE__*/ defineContainer<JSX.IonToolbar>('ion-toolbar', defineIonToolbar, [
-  'color'
+  'color',
+  'titlePlacement'
 ]);