React Headless Menu

A fully headless, themeable, access-controlled, and responsive menu system for React + TailwindCSS.

Caution

This package is intended for educational purposes only. It was built to demonstrate a concept and is not optimized or maintained for production use. Use at your own discretion.

Features

• Fully headless architecture
• Built with TailwindCSS utility classes
• Light & Dark mode support
• Responsive across devices
• Variants: Topbar, Sidebar, Dropdown
• Role-based access control (RBAC)
• Nested menus (up to 3 levels)
• Live Playground + Theming support

Getting Started

npm install @jonmatum/react-headless-menu

import { Menu } from "@jonmatum/react-headless-menu";

<Menu
  variant="auto"
  items={menuData}
  userScopes={userScopes}
  theme={theme}
  color="blue"
  themeName="light"
/>;

Playground

To explore the menu live:

npm run playground

To publish the playground (for GitHub Pages):

npm run build:playground

Resulting output will be in /docs.

Development

Lint, Format & Test

npm run lint
npm run format
npm test

Releasing

This project uses release-please and GitHub Actions to automate releases. All commits must follow Conventional Commits.

npm run release

Contributing

We welcome PRs! Please read the CONTRIBUTING guide.

• Use conventional commits
• Submit docs/tests with features
• Keep code headless and style-agnostic

License

MIT © Jonatan Mata