Chat Header Bar
A navigation header designed for conversation screens. It automatically shows the other participant's name and avatar based on who's logged in β so you don't need to add any conditional logic to figure out "who am I talking to?"
Before You Begin
Your conversation screen should have access to the conversation record β including User 1 ID, User 1 Name, User 1 Image, User 2 Name, and User 2 Image.
If your conversations include group chats, have a Group Name and Group Image URL field available on the conversation record.
Getting Started
Add the Chat Header Bar to your conversation screen and resize it to span the full width.
Set Logged In User ID to Logged In User > ID using Magic Text.
Set User 1 ID to the conversation's User 1 ID field using Magic Text.
Fill in User 1 Name, User 1 Image URL, User 2 Name, and User 2 Image URL from the conversation record.
For group conversations, set Group Name and Group Image URL β when Group Name is filled in, it overrides the user name logic and shows the group info instead.
Set up the Left Button Action β typically a "Go Back" action to return to the conversation list.
Optionally set up the Right Button Action β typically navigates to a "Chat Group Info" screen or another details page.
Settings
Left Button
Icon β The icon shown on the left side. Defaults to a back arrow (
arrow-back).Icon Color β The color of the left button icon.
Icon Size β Icon size in pixels (14β36, default: 24).
Right Button
Show Right Button β Toggle off to hide the right button entirely (useful for 1-on-1 chats where you don't need an info screen).
Icon β The icon shown on the right side. Defaults to
info.Icon Color β The color of the right button icon.
Icon Size β Icon size in pixels (14β36, default: 24).
Name & Avatar
Name & Avatar Position β Align the participant name and avatar to the Left, Center, or Right of the header.
Font Size β The participant name font size (12β24, default: 17).
Font Weight β Light, Regular, Medium, Semi Bold, or Bold.
Name Color β The color of the participant's name.
Avatar Size β The diameter of the avatar image (24β56, default: 36).
Bar Style
Background Color β The header background. Defaults to white.
Height β The overall height of the header bar.
Show Bottom Border β Toggle on to show a hairline separator at the bottom of the bar.
Border Color β The color of the bottom border.
Actions
Left Button Action β Fires when the left button (back arrow) is tapped. Typically a Go Back action.
Right Button Action β Fires when the right button is tapped. Typically navigates to a group info or profile screen.
How Participant Detection Works
The component compares User 1 ID to Logged In User ID. If they match, it displays User 2's name and avatar. If they don't match, it displays User 1's name and avatar. If Group Name is set, it always uses that instead β regardless of the user ID logic.
Tips
If you're using the Conversation List component, it exposes Display Name and Display Image URL as Magic Text outputs β you can pass these between screens to avoid extra database lookups on the conversation screen.
Toggle Show Right Button off for simple 1-on-1 chats where there's no group info screen.
Use Name & Avatar Position > Center for an iOS Messages-style look, or Left for a more compact layout with longer names.
Place this component at the very top of your conversation screen with a fixed height so it doesn't overlap the message list below it.
Need Help?
Visit forum.adalo.com to ask questions or share what you've built.
Was this helpful?