Menus
Examples and documentation for the menus component
Menu Orientations
|
Orientation
|
Horizontal
|
Vertical
|
|---|---|---|
| Basic Items |
|
|
Menu Variants
|
Variant
|
Tabs
|
Pills
|
Buttons
|
|---|---|---|---|
| Horizontal | |||
| Vertical |
|
|
|
Menu Sizes
|
Size
|
SM
|
MD
|
LG
|
|---|---|---|---|
| Horizontal | |||
| Vertical |
|
|
|
Menu Item States
Accessibility: Disabled items are skipped during keyboard navigation and removed from tab order. They cannot be activated via mouse or keyboard interactions.
|
Orientation
|
Example
|
|---|---|
| Horizontal | |
| Vertical |
|
3-Level Positioning System
Smart Positioning: The new positioning system automatically handles side-by-side submenus for 3+ levels, with smart viewport overflow detection and placement optimization.
|
Type
|
Auto-Positioning
|
|---|---|
| 3-Level Navigation | |
| Manual Placement |
Menu Item States
|
Type
|
Item States
|
With Icons
|
|---|---|---|
| Examples |
|
|
Complex Usage Examples
|
Type
|
Mixed Content
|
With Variants
|
|---|---|---|
| Examples |
|
|
Accessibility Features
Accessibility Features: Proper ARIA roles, keyboard navigation, semantic HTML structure.
|
Feature
|
Navigation Menu
|
Action Menu
|
|---|---|---|
| ARIA Roles |
|