Skip to content

feat(toolbar): add titlePlacement prop to control title position relative to content#31034

Draft
brandyscarney wants to merge 6 commits intonextfrom
FW-7054
Draft

feat(toolbar): add titlePlacement prop to control title position relative to content#31034
brandyscarney wants to merge 6 commits intonextfrom
FW-7054

Conversation

@brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Mar 24, 2026

Issue number: internal


What is the current behavior?

The ionic theme currently only supports aligning the toolbar title to the center.

What is the new behavior?

  • Adds titlePlacement property to toolbar
    • This property currently only works for the ionic theme as it is the only theme that supports the new center implementation
    • Set to "start" to place the title to the left in LTR and to the right in RTL
    • Set to "center" to center the title within the toolbar
    • Set to "end" to place the title to the right in LTR and to the left in RTL
  • Adds an e2e test for title-placement which takes screenshots for the ionic theme only

Does this introduce a breaking change?

  • Yes
  • No

Other information

Preview

@vercel
Copy link

vercel bot commented Mar 24, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment Mar 24, 2026 10:26pm

Request Review

@github-actions github-actions bot added package: core @ionic/core package package: angular @ionic/angular package package: vue @ionic/vue package labels Mar 24, 2026
return this.titlePlacement;
}

return getIonTheme(this) === 'ionic' || getIonTheme(this) === 'ios' ? 'center' : 'start';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While this property doesn't work with ios or md yet, this will be needed eventually when we update them to work with it.

* `"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';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I chose to add titlePlacement to the toolbar because it controls all the positioning logic, but if we would prefer to add placement as a property on ion-title we could assign it there and pass it up to ion-toolbar.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: angular @ionic/angular package package: core @ionic/core package package: vue @ionic/vue package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant