Theming documentation for Menu component
List of class names used in the styled mode.
| className | description |
|---|---|
| p-menu | Class name of the root element |
| p-menu-list | Class name of the list element |
| p-menu-label | Class name of the group label element |
| p-menu-submenu | Class name of the submenu element |
| p-menu-submenu-label | Class name of the submenu label element |
| p-menu-separator | Class name of the separator element |
| p-menu-item | Class name of the item element |
| p-menu-item-checkbox | Class name of the checkbox item element |
| p-menu-item-radio | Class name of the radio item element |
| p-menu-trigger-button | Class name of the trigger element |
| p-menu-item-icon | Class name of the item icon element |
| p-menu-checkbox-icon | Class name of the checkbox icon element |
| p-menu-radio-icon | Class name of the radio icon element |
List of design tokens.
| token | CSS Variable | description |
|---|---|---|
| menu.background | --p-menu-background | Background of root |
| menu.border.color | --p-menu-border-color | Border color of root |
| menu.color | --p-menu-color | Color of root |
| menu.border.radius | --p-menu-border-radius | Border radius of root |
| menu.shadow | --p-menu-shadow | Shadow of root |
| menu.transition.duration | --p-menu-transition-duration | Transition duration of root |
| menu.list.padding | --p-menu-list-padding | Padding of list |
| menu.list.gap | --p-menu-list-gap | Gap of list |
| menu.item.focus.background | --p-menu-item-focus-background | Focus background of item |
| menu.item.color | --p-menu-item-color | Color of item |
| menu.item.focus.color | --p-menu-item-focus-color | Focus color of item |
| menu.item.padding | --p-menu-item-padding | Padding of item |
| menu.item.border.radius | --p-menu-item-border-radius | Border radius of item |
| menu.item.gap | --p-menu-item-gap | Gap of item |
| menu.item.icon.color | --p-menu-item-icon-color | Icon color of item |
| menu.item.icon.focus.color | --p-menu-item-icon-focus-color | Icon focus color of item |
| menu.submenu.label.padding | --p-menu-submenu-label-padding | Padding of submenu label |
| menu.submenu.label.font.weight | --p-menu-submenu-label-font-weight | Font weight of submenu label |
| menu.submenu.label.background | --p-menu-submenu-label-background | Background of submenu label |
| menu.submenu.label.color | --p-menu-submenu-label-color | Color of submenu label |
| menu.separator.border.color | --p-menu-separator-border-color | Border color of separator |
Theming is implemented with the pass through properties in unstyled mode.