← DOCS
navigation

VerticalNav

Vertical sidebar navigation with rune decorations.

npx chaos add vertical-nav

PREVIEW

USAGE

import { VerticalNav } from '@/components/chaos/navigation/vertical-nav';

const items = [
  { glyph: '⌂', label: 'Home', href: '/', active: true },
  { glyph: '☰', label: 'Menu', href: '/menu' },
  { glyph: '⚙', label: 'Settings', href: '/settings' },
];

<VerticalNav items={items} />

PROPS

PropTypeDefault
itemsNavigation items {href?, glyph, label?, active?, onClick?}
VerticalNavItemProps[]-
runeTopTop rune symbol
string"ᛟ"
runeBottomBottom rune symbol
string"ᛞ"
variantVisual variant
"default" | "dark""default"
sizeSize variant
"default" | "compact""default"
childrenCustom nav items
ReactNode-