AI Model Selector Navigation Bar

AI-focused navigation bar with model selector dropdown, temporary chat functionality, and user management. Features comprehensive model selection with descriptions and quick access to chat features for AI applications.

Lucide React

Loading component...

'use client';import * as React from 'react';import { BotMessageSquareIcon, MessageCircleDashedIcon } from 'lucide-react';import UserMenu from './UserMenu';import { Button } from '@/components/ui/button';import {  Select,  SelectContent,  SelectGroup,  SelectItem,  SelectLabel,  SelectTrigger,  SelectValue,} from '@/components/ui/select';import { cn } from '@/lib/utils';// Typesexport interface Navbar13AIModel {  value: string;  name: string;  description: string;}export interface Navbar13Props extends React.HTMLAttributes<HTMLElement> {  models?: Navbar13AIModel[];  defaultModel?: string;  userName?: string;  userEmail?: string;  userAvatar?: string;  onModelChange?: (model: string) => void;  onTempChatClick?: () => void;  onUserItemClick?: (item: string) => void;}// Default AI modelsconst defaultModels: Navbar13AIModel[] = [  {    value: 'orion-alpha-45',    name: 'Orion-Alpha 4.5',    description: 'Balanced performance and creativity',  },  {    value: 'orion-code-4',    name: 'Orion-Code 4',    description: 'Optimized for code generation and understanding',  },  {    value: 'nova-chat-4',    name: 'Nova-Chat 4',    description: 'Excels at natural, engaging conversations',  },  {    value: 'galaxy-max-4',    name: 'Galaxy-Max 4',    description: 'Most powerful model for complex tasks',  },];export const Navbar13 = React.forwardRef<HTMLElement, Navbar13Props>(  (    {      className,      models = defaultModels,      defaultModel = 'orion-alpha-45',      userName = 'John Doe',      userEmail = '[email protected]',      userAvatar,      onModelChange,      onTempChatClick,      onUserItemClick,      ...props    },    ref  ) => {    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>            <Select               defaultValue={defaultModel}               onValueChange={onModelChange}              aria-label="Select AI model"            >              <SelectTrigger className="[&>svg]:text-muted-foreground/80 **:data-desc:hidden [&>svg]:shrink-0">                <BotMessageSquareIcon size={16} aria-hidden="true" />                <SelectValue placeholder="Choose an AI model" />              </SelectTrigger>              <SelectContent className="[&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2">                <SelectGroup>                  <SelectLabel className="ps-2">Models</SelectLabel>                  {models.map((model) => (                    <SelectItem key={model.value} value={model.value}>                      {model.name}                      <span                        className="text-muted-foreground mt-1 block text-xs"                        data-desc                      >                        {model.description}                      </span>                    </SelectItem>                  ))}                </SelectGroup>              </SelectContent>            </Select>          </div>          {/* Right side: Actions */}          <div className="flex items-center justify-end gap-2">            {/* Temporary chat button */}            <Button              size="icon"              variant="ghost"              className="text-muted-foreground size-8 rounded-full shadow-none"              aria-label="Temporary chat"              onClick={(e) => {                e.preventDefault();                if (onTempChatClick) onTempChatClick();              }}            >              <MessageCircleDashedIcon size={16} aria-hidden="true" />            </Button>            {/* User menu */}            <UserMenu               userName={userName}              userEmail={userEmail}              userAvatar={userAvatar}              onItemClick={onUserItemClick}            />          </div>        </div>      </header>    );  });Navbar13.displayName = 'Navbar13';export { UserMenu };

Installation

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

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

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

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

Features

AI model selector with detailed descriptions for each model (Orion-Alpha, Orion-Code, Nova-Chat, Galaxy-Max)
Model descriptions showing each AI model's strengths and use cases in the dropdown
Temporary chat button with dashed message icon for quick temporary conversations
Clean layout with left-aligned model selector and right-aligned user actions
User profile menu with avatar display and account management options
TypeScript support with comprehensive interface definitions for AI models and callbacks
shadcn/ui integration using Select component with grouped options and custom styling

Use Cases

This free open source React component works well for:

AI chat applications - Conversational AI platforms with multiple model options using Next.js
Code generation tools - Development platforms with specialized AI models using TypeScript
Creative writing platforms - Content creation tools with AI assistance using Tailwind CSS
Enterprise AI dashboards - Business applications with model selection and user management

API Reference

Navbar13

Prop	Type	Default	Description
`models`	`Navbar13AIModel[]`	`defaultModels`	Array of available AI models with descriptions
`defaultModel`	`string`	`"orion-alpha-45"`	Default selected AI model
`userName`	`string`	`"John Doe"`	Display name for the user profile
`userEmail`	`string`	`"[email protected]"`	Email address for the user profile
`userAvatar`	`string`	`undefined`	URL for user avatar image
`onModelChange`	`(model: string) => void`	`undefined`	Callback for AI model selection changes
`onTempChatClick`	`() => void`	`undefined`	Callback for temporary chat button clicks
`onUserItemClick`	`(item: string) => void`	`undefined`	Callback for user menu item clicks

AI Model Interface

interface Navbar13AIModel {
  value: string;    // Unique identifier for the model
  name: string;     // Display name of the model
  description: string; // Description of model capabilities
}

Model Selection Features

Grouped Options - Models organized under "Models" label in the dropdown
Rich Descriptions - Each model shows capabilities and use cases
Icon Integration - Bot message square icon indicates AI functionality
Accessible Selection - Proper ARIA labels and keyboard navigation support

Action Integration

Temporary Chat - Quick access button for temporary conversations
User Management - Standard user profile menu with account options
Clean Spacing - Proper gap management between action elements
Responsive Design - Consistent sizing across different screen sizes

Implementation Notes

Uses shadcn/ui Select component with SelectGroup for organized model options
Model descriptions use data-desc attribute for custom styling support
Temporary chat button uses rounded-full styling for distinctive appearance
All action buttons include proper ARIA labels for accessibility
Model selector includes BotMessageSquare icon to indicate AI functionality
Compatible with shadcn/ui design system and Tailwind CSS styling framework
Left-aligned model selector emphasizes primary functionality
Right-aligned actions maintain consistent user interface patterns across navbar variations

AI Model Selector Navigation Bar

Reactnavbar-13

On this page