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-