Status Dashboard Navigation Bar

System monitoring navigation bar with status indicators, performance metrics, and power control. Features real-time status badges, uptime tracking, latency monitoring, and animated power toggle for infrastructure dashboards.

Lucide React

Loading component...

'use client';import * as React from 'react';import { useId, useState } from 'react';import { ClockIcon, PowerIcon, PowerOffIcon, ZapIcon } from 'lucide-react';import { Badge } from '@/components/ui/badge';import { Button } from '@/components/ui/button';import { Label } from '@/components/ui/label';import {  NavigationMenu,  NavigationMenuItem,  NavigationMenuLink,  NavigationMenuList,} from '@/components/ui/navigation-menu';import {  Popover,  PopoverContent,  PopoverTrigger,} from '@/components/ui/popover';import { Switch } from '@/components/ui/switch';import { cn } from '@/lib/utils';// Hamburger icon componentconst HamburgerIcon = ({ className, ...props }: React.SVGAttributes<SVGElement>) => (  <svg    className={cn('pointer-events-none', className)}    width={16}    height={16}    viewBox="0 0 24 24"    fill="none"    stroke="currentColor"    strokeWidth="2"    strokeLinecap="round"    strokeLinejoin="round"    xmlns="http://www.w3.org/2000/svg"    {...props}  >    <path      d="M4 12L20 12"      className="origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]"    />    <path      d="M4 12H20"      className="origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45"    />    <path      d="M4 12H20"      className="origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]"    />  </svg>);// Typesexport interface Navbar18NavItem {  href?: string;  label: string;  active?: boolean;}export interface Navbar18StatusIndicator {  type: 'online' | 'uptime' | 'latency';  value: string;  color?: 'emerald' | 'default';}export interface Navbar18Props extends React.HTMLAttributes<HTMLElement> {  navigationLinks?: Navbar18NavItem[];  statusIndicators?: Navbar18StatusIndicator[];  powerState?: boolean;  onNavItemClick?: (href: string) => void;  onPowerToggle?: (enabled: boolean) => void;}// Default navigation linksconst defaultNavigationLinks: Navbar18NavItem[] = [  { href: '#', label: 'Overview', active: true },  { href: '#', label: 'Graphs', active: false },  { href: '#', label: 'Backups', active: false },];// Default status indicatorsconst defaultStatusIndicators: Navbar18StatusIndicator[] = [  { type: 'online', value: 'Online', color: 'emerald' },  { type: 'uptime', value: '99.9%' },  { type: 'latency', value: '45ms' },];export const Navbar18 = React.forwardRef<HTMLElement, Navbar18Props>(  (    {      className,      navigationLinks = defaultNavigationLinks,      statusIndicators = defaultStatusIndicators,      powerState: controlledPowerState,      onNavItemClick,      onPowerToggle,      ...props    },    ref  ) => {    const id = useId();    const [internalPowerState, setInternalPowerState] = useState<boolean>(true);        // Use controlled or internal power state    const powerState = controlledPowerState !== undefined ? controlledPowerState : internalPowerState;        const handlePowerToggle = (checked: boolean) => {      if (controlledPowerState === undefined) {        setInternalPowerState(checked);      }      if (onPowerToggle) {        onPowerToggle(checked);      }    };    const renderStatusBadge = (indicator: Navbar18StatusIndicator) => {      const badgeClass = indicator.color === 'emerald' ? 'gap-1.5 text-emerald-600' : 'gap-1.5';            return (        <Badge key={indicator.type} variant="outline" className={badgeClass}>          {indicator.type === 'online' && indicator.color === 'emerald' && (            <span              className="size-1.5 rounded-full bg-emerald-500"              aria-hidden="true"            />          )}          {indicator.type === 'uptime' && (            <ZapIcon              className="-ms-0.5 opacity-60"              size={12}              aria-hidden="true"            />          )}          {indicator.type === 'latency' && (            <ClockIcon              className="-ms-0.5 opacity-60"              size={12}              aria-hidden="true"            />          )}          {indicator.value}        </Badge>      );    };    return (      <header        ref={ref}        className={cn(          'border-b px-4 md:px-6 [&_*]:no-underline',          className        )}        {...props}      >        <div className="flex h-16 justify-between gap-4">          {/* Left side */}          <div className="flex gap-2">            <div className="flex items-center md:hidden">              {/* Mobile menu trigger */}              <Popover>                <PopoverTrigger asChild>                  <Button className="group size-8" variant="ghost" size="icon">                    <HamburgerIcon />                  </Button>                </PopoverTrigger>                <PopoverContent align="start" className="w-36 p-1 md:hidden">                  <NavigationMenu className="max-w-none *:w-full">                    <NavigationMenuList className="flex-col items-start gap-0 md:gap-2">                      {navigationLinks.map((link, index) => (                        <NavigationMenuItem key={index} className="w-full">                          <button                            onClick={(e) => {                              e.preventDefault();                              if (onNavItemClick && link.href) onNavItemClick(link.href);                            }}                            className="flex w-full items-center py-1.5 px-3 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer rounded-md no-underline"                          >                            {link.label}                          </button>                        </NavigationMenuItem>                      ))}                    </NavigationMenuList>                  </NavigationMenu>                </PopoverContent>              </Popover>            </div>            {/* Main nav */}            <div className="flex items-center gap-6">              {/* Navigation menu */}              <NavigationMenu className="h-full *:h-full max-md:hidden">                <NavigationMenuList className="h-full gap-2">                  {navigationLinks.map((link, index) => (                    <NavigationMenuItem key={index} className="h-full">                      <NavigationMenuLink                        active={link.active}                        href={link.href}                        onClick={(e) => {                          e.preventDefault();                          if (onNavItemClick && link.href) onNavItemClick(link.href);                        }}                        className="text-muted-foreground hover:text-primary border-b-primary hover:border-b-primary data-[active]:border-b-primary h-full justify-center rounded-none border-y-2 border-transparent py-1.5 font-medium hover:bg-transparent data-[active]:bg-transparent cursor-pointer"                      >                        {link.label}                      </NavigationMenuLink>                    </NavigationMenuItem>                  ))}                </NavigationMenuList>              </NavigationMenu>            </div>          </div>          {/* Right side */}          <div className="flex items-center gap-4">            <div className="flex items-center gap-2">              {statusIndicators.map(renderStatusBadge)}            </div>            {/* Switch */}            <div>              <div className="relative inline-grid h-7 grid-cols-[1fr_1fr] items-center text-sm font-medium">                <Switch                  id={id}                  checked={powerState}                  onCheckedChange={handlePowerToggle}                  className="peer data-[state=unchecked]:bg-input/50 absolute inset-0 h-[inherit] w-auto [&_span]:z-10 [&_span]:h-full [&_span]:w-1/2 [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:data-[state=checked]:translate-x-full [&_span]:data-[state=checked]:rtl:-translate-x-full"                />                <span className="pointer-events-none relative ms-0.5 flex w-6 items-center justify-center text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:invisible peer-data-[state=unchecked]:translate-x-full peer-data-[state=unchecked]:rtl:-translate-x-full">                  <PowerOffIcon size={12} aria-hidden="true" />                </span>                <span className="peer-data-[state=checked]:text-background pointer-events-none relative me-0.5 flex w-6 items-center justify-center text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:-translate-x-full peer-data-[state=unchecked]:invisible peer-data-[state=checked]:rtl:translate-x-full">                  <PowerIcon size={12} aria-hidden="true" />                </span>              </div>              <Label htmlFor={id} className="sr-only">                Power              </Label>            </div>          </div>        </div>      </header>    );  });Navbar18.displayName = 'Navbar18';export { HamburgerIcon };

Installation

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

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

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

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

Features

Status indicators with online status, uptime percentage, and latency metrics
Visual status badges with colored indicators (green dot for online status)
Performance metrics showing uptime (99.9%) and latency (45ms) with icons
Animated power toggle with smooth transition between power on/off states
Border bottom navigation with active state indicators using primary color
Mobile hamburger menu with collapsible navigation for responsive design
Real-time monitoring interface for system and infrastructure status
TypeScript support with comprehensive interfaces for status and navigation

Use Cases

This free open source React component works well for:

System monitoring - Infrastructure dashboards with real-time status tracking using Next.js
Server management - Hosting panels with uptime and performance metrics using TypeScript
DevOps dashboards - Operations interfaces with system health indicators using Tailwind CSS
Cloud platforms - Service management with power controls and status monitoring

API Reference

Navbar18

Prop	Type	Default	Description
`navigationLinks`	`Navbar18NavItem[]`	`defaultNavigationLinks`	Array of navigation menu items with active states
`statusIndicators`	`Navbar18StatusIndicator[]`	`defaultStatusIndicators`	Array of status badges with metrics
`powerState`	`boolean`	`undefined`	Controlled power toggle state
`onNavItemClick`	`(href: string) => void`	`undefined`	Callback for navigation item clicks
`onPowerToggle`	`(enabled: boolean) => void`	`undefined`	Callback for power toggle changes

interface Navbar18NavItem {
  href?: string;     // Link URL for navigation
  label: string;     // Display text for navigation item
  active?: boolean;  // Active state with border indicator
}

Status Interface

interface Navbar18StatusIndicator {
  type: 'online' | 'uptime' | 'latency';  // Status indicator type
  value: string;                          // Display value or text
  color?: 'emerald' | 'default';         // Color theme for badge
}

Border Bottom Active - Active navigation items show primary color bottom border
Mobile Responsive - Hamburger menu for mobile with collapsible navigation
Hover States - Interactive hover effects with color transitions
Active Indicators - Clear visual feedback for current page selection

Status Monitoring

Online Status - Green dot indicator with "Online" text for system status
Uptime Metrics - Lightning bolt icon with percentage display (99.9%)
Latency Display - Clock icon with millisecond response time (45ms)
Badge Styling - Outline variant badges with consistent spacing and icons

Power Control

Animated Toggle - Smooth transition between power on/off states
Visual Icons - Power and PowerOff icons that animate during state changes
Custom Styling - Advanced switch styling with grid layout and smooth transitions
State Management - Support for controlled and uncontrolled power state

Implementation Notes

Uses shadcn/ui NavigationMenu with custom border-bottom active state styling
Status badges use Badge component with outline variant and custom icon positioning
Power toggle implements advanced Switch styling with cubic-bezier animations
Mobile navigation uses Popover component with responsive design patterns
Active navigation state uses data-[active] attribute for border-bottom primary color
Compatible with shadcn/ui design system and Tailwind CSS styling framework
Power icons animate with smooth transitions using transform and visibility states
Status indicators support customizable colors and icon types for different metrics

Status Dashboard Navigation Bar

Installation

Features

Use Cases

API Reference

Navbar18

Navigation Interface

Status Interface

Navigation Features

Status Monitoring

Power Control

Implementation Notes

On this page

Status Dashboard Navigation Bar

Reactnavbar-18

On this page