--- id: Menu toggle section: components subsection: menus cssPrefix: pf-v6-c-menu-toggle propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox'] --- import { Fragment, useState } from 'react'; import './MenuToggle.css' import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon'; ## Examples ### Collapsed toggle A toggle is collapsed until it is selected by a user. ```ts file="MenuToggleCollapsed.tsx" ``` ### Expanded toggle When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property . ```ts file ="MenuToggleExpanded.tsx" ``` ### Small toggle You can pass `size="sm"` to a MenuToggle to style it as a small toggle, such as within a [breadcrumb](/components/breadcrumb). ```ts file="MenuToggleSmall.tsx" ``` ### Disabled toggle To disable the selection and expansion of a toggle, use the `isDisabled` property. ```ts file="MenuToggleDisabled.tsx" ``` ### With a badge To display a count of selected items in a toggle, use the `badge` property. You can also pass in `variant="plainText"` for a badge only toggle. ```ts file="MenuToggleBadge.tsx" ``` ### Settings toggle To create a "settings" menu toggle that will animate on hover and focus, you can pass the `isSettings` property in. Doing so will override the `icon` property, as a specific icon is used internally for the animations. ```ts file="MenuToggleSettings.tsx" ``` ### Custom icons To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `PlusIcon` to the toggle. For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon). ```ts file="MenuToggleCustomIcon.tsx" ``` ### With avatar and text You can also pass images into the `icon` property. The following example passes in an `` component with an `imgAvatar`. This can be used alongside a text label that provides more context for the image. ```ts file="MenuToggleAvatarText.tsx" ``` ### Variant styles Variant styling can be applied to menu toggles. In the following example, the toggle uses primary styling by passing `variant="primary"` into the `` component. Additional variant options include “default”, “plain”, “plainText”, “secondary”, and “typeahead”. ```ts file="MenuToggleVariantStyles.tsx" ``` ### Plain toggle with icon To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`. This will remove the default bottom border and caret. You may pass in an `icon` to serve as the menu toggle. The following example passes in an `EllipsisVIcon`. If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name. ```ts file="MenuTogglePlainIcon.tsx" ``` ### Plain circle toggle You can also pass the `isCircle` property to a plain, icon-only toggle to adjust the styling to a complete circular shape, rather than a rounded square. ```ts file="MenuTogglePlainCircle.tsx" ``` ### Plain toggle with text label To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle. ```ts file="MenuTogglePlainTextLabel.tsx" ``` ### Split toggle with checkbox To add a checkbox (or other action/control) to a menu toggle, use a split button. A `` can be rendered as a split button by adding a `splitButtonItems` property. Elements to be displayed before the toggle button must be included in the `splitButtonItems`. The following example shows a split button with a ``. Variant styling can be applied to split button toggles to adjust their appearance for different scenarios. Both "primary" and "secondary" variants can be used with split button toggles. ```ts file='MenuToggleSplitButtonCheckbox.tsx' ``` ### Split toggle with labeled checkbox You can allow users to select a toggle checkbox by clicking either the checkbox or the text label. To link a split toggle label to the toggle's checkbox, pass both the label and the `` component to `splitButtonItems`. ```ts file='MenuToggleSplitButtonCheckboxWithText.tsx' ``` ### Split toggle with checkbox and toggle text To link a split toggle label to the toggle button itself, pass the label to the `` component, instead of `splitButtonItems`. ```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx' ``` ### Split toggle with action To add an action to a split button, add a `` to the `splitButtonItems` property. Actions may be used with primary and secondary toggle variants. ```ts file='MenuToggleSplitButtonAction.tsx' ``` ### Full height toggle A full height toggle fills the height of its parent. To flag a full height toggle, use the `isFullHeight` property. In the following example, the toggle fills the size of the "80px" `
` element that it is within. ```ts file="MenuToggleFullHeight.tsx" ``` ### Full width toggle A full width toggle fills the width of its parent. To flag a full width toggle, use the `isFullWidth` property. In the following example, the toggle fills the width of its parent as the window size changes. ```ts file="MenuToggleFullWidth.tsx" ``` ### Toggle in a form When a menu toggle is used inside a form, pass the `isInForm` property so the toggle receives form-appropriate styling. ```ts file="MenuToggleInForm.tsx" ``` ### Typeahead toggle To create a typeahead toggle, pass in `variant="typeahead"` to the ``. Then, pass a `` component as a child of the ``. To create a multiple typeahead toggle, pass a `` component implemented like the [text input group's filter example](/components/text-input-group#filters) as a child of ``. ```ts file='MenuToggleTypeahead.tsx' ``` ### Status toggle To create a toggle with a status, pass in the `status` property to the `MenuToggle`. The default icon associated with each status may be overridden by using the `statusIcon` property. When the status value is "warning" or "danger", you must include helper text that conveys what is causing the warning/error. ```ts file='MenuToggleStatus.tsx' ``` ### Placeholder text in toggle To indicate the toggle contains placeholder text, pass the `isPlaceholder` property to the `MenuToggle`. ```ts file='MenuTogglePlaceholder.tsx' ```