rokle

Personality

20
40
70
15

Active brand: Meridian

Adjust sliders to see every component on the page respond in real time.

Menu

Standalone vertical menu list for sidebar or panel navigation with optional icons.

Examples

Basic menu

A simple vertical list of menu items.

With keyboard shortcuts

Each item shows its keyboard shortcut aligned to the right.

With icons

Icon prefix on each menu item for quick scanning.

With danger item and divider

Destructive action separated by a divider at the bottom.

Installation

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

Usage

import { Menu } from "@rokle/components";
import { Menu } from "@rokle/components";

export function Example() {
  return <Menu />;
}

API Reference

PropTypeDefaultDescription
itemsMenuItem[]-Menu items with label, href, and optional icon.
activeItemstring-Value of the currently active item.