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-