Global Navigation

Navigation & Interface Elements

Global Navigation

Top Header (Present on All Pages):

1. Left Side:

   • Group/Platform Logo: Click to navigate to dashboard or group home
   • Group Name: Shows current group (if in a group)
   • Dropdown Arrow: Access group switcher or menu

2. Center:

   • Search Bar: Global search across the platform
   • Placeholder: "Search" or "Search communities..."

3. Right Side:

   • Messages Icon: Access direct messages
   • Notifications Icon: View notifications (shows count badge if unread)
   • Profile Icon: Your profile picture - click for account menu

Group Navigation Tabs (Within Groups):

• Community: Feed and discussions
• Classroom: Courses and learning
• Calendar: Events and scheduling
• Members: Member directory
• Leaderboards: Rankings and points
• About: Community information

Helper Widget

Floating Action Button:

• Location: Bottom right corner
• Icon: Yellow circular button with hand icon
• Function: Opens support chat widget
• Purpose: Get help, ask questions, or access support

Common UI Patterns

1. Yellow Buttons: Primary actions (Join, Save, Create, etc.)
2. White Buttons: Secondary actions (View Profile, Follow, etc.)
3. Progress Bars: Show completion status (courses, lessons)
4. Badges: Indicate status (Private, Owner, Admin, Member)
5. Cards: Container for content (groups, courses, members)
6. Tabs: Switch between different views or filters
7. Search Bars: Find content, members, or events
8. Character Counters: Show remaining characters (bio fields)