Collaboration Navigation Bar

Document-focused navigation bar with back navigation, action buttons, and live collaboration features. Shows online users with status indicators, history access, comments, and user management for collaborative editing environments.

Lucide React

Loading component...

'use client';import * as React from 'react';import {  ChevronLeftIcon,  HistoryIcon,  MessageSquareText,  UserRoundPlus,} from 'lucide-react';import {  Avatar,  AvatarFallback,  AvatarImage,} from '@/components/ui/avatar';import { Button } from '@/components/ui/button';import { cn } from '@/lib/utils';// Typesexport interface Navbar17User {  id: string;  name: string;  avatar?: string;  fallback: string;  isOnline?: boolean;}export interface Navbar17Props extends React.HTMLAttributes<HTMLElement> {  title?: string;  backHref?: string;  users?: Navbar17User[];  additionalUsersCount?: number;  showBackButton?: boolean;  onBackClick?: () => void;  onHistoryClick?: () => void;  onCommentsClick?: () => void;  onAddUserClick?: () => void;  onUserClick?: (userId: string) => void;  onAdditionalUsersClick?: () => void;}// Default usersconst defaultUsers: Navbar17User[] = [  {    id: '1',    name: 'Kelly King',    avatar: './avatar-80-07.jpg',    fallback: 'KK',    isOnline: true,  },  {    id: '2',    name: 'Martha Johnson',    avatar: './avatar-80-06.jpg',    fallback: 'MJ',    isOnline: false,  },  {    id: '3',    name: 'Linda Green',    avatar: './avatar-80-05.jpg',    fallback: 'LG',    isOnline: false,  },];export const Navbar17 = React.forwardRef<HTMLElement, Navbar17Props>(  (    {      className,      title = 'Basic UI',      backHref = '#',      users = defaultUsers,      additionalUsersCount = 3,      showBackButton = true,      onBackClick,      onHistoryClick,      onCommentsClick,      onAddUserClick,      onUserClick,      onAdditionalUsersClick,      ...props    },    ref  ) => {    const handleBackClick = (e: React.MouseEvent) => {      e.preventDefault();      if (onBackClick) {        onBackClick();      }    };    return (      <header        ref={ref}        className={cn(          'border-b px-4 md:px-6 [&_*]:no-underline',          className        )}        {...props}      >        <div className="flex h-16 items-center justify-between gap-4">          {/* Left side */}          <div className="flex items-center gap-2">            {showBackButton && (              <Button                className="size-8"                variant="ghost"                size="icon"                aria-label="Go back"                onClick={handleBackClick}              >                <ChevronLeftIcon />              </Button>            )}            <h1 className="text-sm font-medium">{title}</h1>          </div>          {/* Right side */}          <div className="flex items-center gap-2">            {/* History button */}            <Button              size="icon"              variant="ghost"              className="text-muted-foreground size-8 rounded-full shadow-none"              aria-label="History"              onClick={(e) => {                e.preventDefault();                if (onHistoryClick) onHistoryClick();              }}            >              <HistoryIcon size={16} aria-hidden="true" />            </Button>            {/* Comments button */}            <Button              size="icon"              variant="ghost"              className="text-muted-foreground size-8 rounded-full shadow-none"              aria-label="Comments"              onClick={(e) => {                e.preventDefault();                if (onCommentsClick) onCommentsClick();              }}            >              <MessageSquareText size={16} aria-hidden="true" />            </Button>            {/* Add user */}            <Button              size="icon"              variant="ghost"              className="text-muted-foreground size-8 rounded-full shadow-none"              aria-label="Add user"              onClick={(e) => {                e.preventDefault();                if (onAddUserClick) onAddUserClick();              }}            >              <UserRoundPlus size={16} aria-hidden="true" />            </Button>            {/* Online users */}            <div className="ml-2 flex items-center gap-2">              {users.map((user) => (                <div key={user.id} className="relative">                  <button                    onClick={(e) => {                      e.preventDefault();                      if (onUserClick) onUserClick(user.id);                    }}                    className="cursor-pointer"                    aria-label={`View ${user.name}'s profile`}                  >                    <Avatar>                      <AvatarImage src={user.avatar} alt={user.name} />                      <AvatarFallback>{user.fallback}</AvatarFallback>                    </Avatar>                  </button>                  <span                     className={cn(                      "border-background absolute -end-0.5 -bottom-0.5 size-3 rounded-full border-2",                      user.isOnline ? "bg-emerald-500" : "bg-muted-foreground"                    )}                  >                    <span className="sr-only">                      {user.isOnline ? 'Online' : 'Offline'}                    </span>                  </span>                </div>              ))}              {additionalUsersCount > 0 && (                <Button                  variant="secondary"                  className="bg-secondary text-muted-foreground ring-background hover:bg-secondary hover:text-foreground flex size-8 items-center justify-center rounded-full text-xs"                  size="icon"                  onClick={(e) => {                    e.preventDefault();                    if (onAdditionalUsersClick) onAdditionalUsersClick();                  }}                  aria-label={`View ${additionalUsersCount} more users`}                >                  +{additionalUsersCount}                </Button>              )}            </div>          </div>        </div>      </header>    );  });Navbar17.displayName = 'Navbar17';

Installation

npx shadcn@latest add https://www.shadcn.io/registry/navbar-17.json

npx shadcn@latest add https://www.shadcn.io/registry/navbar-17.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/navbar-17.json

bunx shadcn@latest add https://www.shadcn.io/registry/navbar-17.json

Features

Back navigation with chevron left icon and customizable click handling
Document title display with configurable heading text
History access button for document version control and change tracking
Comments system with message square icon for collaborative feedback
User management with add user functionality for team collaboration
Live user presence showing online/offline status with colored indicators
Avatar display with fallback initials and clickable user profiles
Additional users counter showing overflow count with expandable view
Real-time collaboration indicators with green (online) and gray (offline) status dots

Use Cases

This free open source React component works well for:

Document editors - Collaborative editing platforms with real-time user presence using Next.js
Design tools - Creative applications with team collaboration and version history using TypeScript
Project management - Task and document management with team member visibility using Tailwind CSS
Content creation - Writing and editing platforms with commenting and user management

API Reference

Navbar17

Prop	Type	Default	Description
`title`	`string`	`"Basic UI"`	Document or page title displayed in header
`backHref`	`string`	`"#"`	URL for back navigation link
`users`	`Navbar17User[]`	`defaultUsers`	Array of collaborating users with presence
`additionalUsersCount`	`number`	`3`	Count of additional users not shown in avatars
`showBackButton`	`boolean`	`true`	Whether to display back navigation button
`onBackClick`	`() => void`	`undefined`	Callback for back button clicks
`onHistoryClick`	`() => void`	`undefined`	Callback for history button clicks
`onCommentsClick`	`() => void`	`undefined`	Callback for comments button clicks
`onAddUserClick`	`() => void`	`undefined`	Callback for add user button clicks
`onUserClick`	`(userId: string) => void`	`undefined`	Callback for user avatar clicks
`onAdditionalUsersClick`	`() => void`	`undefined`	Callback for additional users counter clicks

User Interface

interface Navbar17User {
  id: string;          // Unique identifier for the user
  name: string;        // Display name for accessibility
  avatar?: string;     // URL for user avatar image
  fallback: string;    // Initials or fallback text
  isOnline?: boolean;  // Online presence status
}

Back Button - Chevron left icon with configurable click handling
Title Display - Document or page title with semantic heading markup
Responsive Design - Consistent spacing and alignment across screen sizes
Link Integration - Support for both href navigation and callback handling

Collaboration Tools

History Access - History icon for document version control
Comments System - Message square icon for collaborative feedback
User Management - Add user icon for team member invitation
Action Callbacks - Click handlers for all collaborative actions

User Presence

Avatar Display - User profile pictures with fallback initials
Online Status - Green dot for online users, gray for offline
Clickable Profiles - Interactive user avatars with accessibility labels
Overflow Counter - Additional users count with expandable functionality
Status Indicators - Visual presence dots with screen reader support

Implementation Notes

Uses shadcn/ui Avatar component for user profile display with fallback support
Online status indicators use emerald-500 for online and muted-foreground for offline
All action buttons use ghost variant with rounded-full styling for consistency
User avatars are clickable with proper ARIA labels for accessibility
Additional users counter uses secondary variant with hover state changes
Compatible with shadcn/ui design system and Tailwind CSS styling framework
Status dots positioned absolutely with proper border styling for visual clarity
Back button includes preventDefault with callback support for custom navigation handling

Collaboration Navigation Bar

Installation

Features

Use Cases

API Reference

Navbar17

User Interface

Navigation Features

Collaboration Tools

User Presence

Implementation Notes

On this page

Collaboration Navigation Bar

Reactnavbar-17

On this page