If you’ve found an error, spotted something missing, or feel a section could be clearer or better explained, we’d love to hear from you. Your feedback helps keep the documentation accurate and useful for everyone.
Please report issues or suggest improvements on GitHub. Community input is invaluable in making the docs stronger.
Not comfortable with GitHub? No problem — you can also get in touch with us directly via our contact form. We welcome all feedback.
Dynamic Browser Tabs
With the mx-swap-title attribute, you can update your browser tab titles instantly as users navigate through your content - no page reloads required!
Why Update Page Titles?
Imagine you're building a movie review website. When visitors browse different films, you'd want the browser tab to show which film they're currently viewing. This helps users:
- Quickly find your page among multiple browser tabs
- Create accurate bookmarks for specific content
- See meaningful titles in their browser history
How to Update Page Titles
Using mx-swap-title is straightforward. Here's a simple example:
For an HTML-only approach, here's the corresponding code:
Understanding the Code
Let's break down what's happening:
- When the button is clicked, it fetches content from
films/view/123. - The film details are loaded into the
#film-detailsdiv. - The page title automatically updates to match the page title from the target API endpoint.
Important: Your server response needs to include a <title> tag. For example:
Real-World Example
Here's how you might use this in a product catalog:
Now when customers browse different products, your page title will automatically update to show the current product name - perfect for when they have multiple items open in different tabs!
Top Tips for Title Swapping
- Keep Titles Descriptive: Include both the specific content (e.g., product name) and your site name
- Be Consistent: Maintain a consistent title format across all your pages
- Test Navigation: Ensure titles update correctly when users use browser back/forward buttons
- Mind Your Length: Keep titles under 60 characters - they'll look better in browser tabs and history
Summary
Dynamic page titles might seem like a small detail, but they significantly improve the user experience of your web applications. With mx-swap-title, Trongate MX makes it easy to implement this professional touch. Just add the attribute to your elements, ensure your server returns the right title tags, and you're ready to go!