← DOCS
navigation

BrutalNav

Bold brutalist navigation bar with status indicators.

npx chaos add brutal-nav

PREVIEW

CHAOSLINK

USAGE

import { BrutalNav } from '@/components/chaos/navigation/brutal-nav';

<BrutalNav 
  brand="CHAOS"
  brandGlitch
  links={[
    { href: '/', children: 'HOME', active: true },
    { href: '/about', children: 'ABOUT' },
  ]}
  statusItems={[
    { label: 'STATUS', value: 'ONLINE', status: 'online' },
  ]}
/>

PROPS

PropTypeDefault
brandBrand/logo text
string-
brandGlitchEnable brand glitch effect
boolean-
linksNavigation links {href, children, active?}
BrutalNavLinkProps[]-
statusItemsStatus indicators {label, value, status?}
BrutalNavStatusProps[]-
variantVisual variant
"default" | "heavy" | "double""default"
childrenCustom content
ReactNode-