A
Anonymous

User Navbar - Copy this React, Tailwind Component to your project

Design a user specific navbar for a chat application's chatting area that enhances user experience. This navbar, visible when chatting with a specific user, includes: Username and Profile Picture: Displays the contact’s name and avatar. Online/Offline Status: Indicates if the user is active. Call Options: Icons for Voice Call and Video Call to quickly initiate calls. Three Dot Menu (More Options): Dropdown for actions like Mute Notifications, Block/Unblock User, View Profile, Clear Chat, Delete Chat, Archive Chat, Pin Chat, Mark as Unread, and Search in Conversation. Search Icon: Allows searching messages within the current chat. Info Icon: Provides chat details, shared media, and participant info in group chats. Back Button: To return to the main chat list. This navbar is tailored for interaction within individual or group chats, not a global app navigation.

Prompt
Component Preview

About

UserNavbar - A tailored chat navbar with username, online status, call options, and more. Built with React and Tailwind. View and copy code!

Share

Last updated 1 month ago