Menubar

An accessible and customizable menubar component for navigation and interaction.

Introduction

The Menubar component is a highly customizable and accessible navigation component. It supports dropdown menus, checkboxes, radio groups, and separators to create feature-rich interfaces.

Default Use Case: Simple Menubar

Advanced Use Case: Checkbox Menubar

Advanced Use Case: Radio Menubar

Installation

Install the Menubar component:

npx axionjs-ui add menubar

File Structure

menubar.tsx

Prop Types

Prop	Type	Default
`align`	`"start" \| "center" \| "end"`	`"start"`
`alignOffset`	`number`	`-4`
`sideOffset`	`number`	`8`

Features

Dropdown Menus:
- Add nested dropdowns with smooth animations.
Checkbox Menus:
- Support multi-select options.
Radio Groups:
- Add grouped options with single selection.

Accessibility

Keyboard Support:
- Navigate with Tab, Arrow, and Enter keys.
ARIA Attributes:
- Implements aria-haspopup, aria-expanded, and more.
Screen Reader Support:
- Fully compatible with screen readers.

Conclusion

The Menubar component is a robust and accessible solution for creating navigation menus with advanced features like nested menus, checkboxes, and radio groups.