diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/overflow-menu/img/cardoverflow.png b/packages/v4/patternfly-docs/content/design-guidelines/components/overflow-menu/img/cardoverflow.png new file mode 100644 index 0000000000..474952337d Binary files /dev/null and b/packages/v4/patternfly-docs/content/design-guidelines/components/overflow-menu/img/cardoverflow.png differ diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/overflow-menu/img/tableoverflow.png b/packages/v4/patternfly-docs/content/design-guidelines/components/overflow-menu/img/tableoverflow.png new file mode 100644 index 0000000000..6afe00022c Binary files /dev/null and b/packages/v4/patternfly-docs/content/design-guidelines/components/overflow-menu/img/tableoverflow.png differ diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/overflow-menu/img/toolbaroverflow.png b/packages/v4/patternfly-docs/content/design-guidelines/components/overflow-menu/img/toolbaroverflow.png new file mode 100644 index 0000000000..67c1261782 Binary files /dev/null and b/packages/v4/patternfly-docs/content/design-guidelines/components/overflow-menu/img/toolbaroverflow.png differ diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/overflow-menu/overflow-menu.md b/packages/v4/patternfly-docs/content/design-guidelines/components/overflow-menu/overflow-menu.md index 1d55230cca..bbc903f576 100644 --- a/packages/v4/patternfly-docs/content/design-guidelines/components/overflow-menu/overflow-menu.md +++ b/packages/v4/patternfly-docs/content/design-guidelines/components/overflow-menu/overflow-menu.md @@ -2,4 +2,35 @@ id: Overflow menu section: components --- -An **overflow menu** groups a set of actions in a responsive horizontal list. Actions can be set to persist or collapse into a kebab as the viewport shrinks. Overflow menus are useful in toolbars or other places where a group of actions are required. + +An **overflow menu** groups a set of actions in a responsive horizontal list to help declutter an interface. Actions can be set to persist or collapse into a kebab as the viewpoint shrinks. Overflow menus are useful in toolbars or other places where a group of actions is required. + +## Usage +Use an overflow menu when additional options are available to the user but there is a space constraint. Common usage for overflow menu's happen when switching a UI from a desktop to a mobile device. + +### When to use +* Use an overflow menu in a table toolbar to group a number of actions and create visual space. Avoid having more than 3 actions fully displayed within a toolbar. + + + image showing toolbar overflow + +* Use an overflow menu within a table row when additional actions are available that don’t correspond with a column header. + + image showing table with overflow +* Use an overflow menu within a card component to present additional menu options or provide action links. + + image showing card overflow + +### When not to use +* Do not use an overflow menu when there are 2 or fewer actions available to the user. +* Do not use in conjunction with label groups when there isn’t enough space to display each label. Instead, use an [overflow label](https://www.patternfly.org/v4/components/label-group). +* Do not use an overflow menu to hide additional content that you dont want to be seen by default, instead use an [expandable section](https://www.patternfly.org/v4/components/expandable-section/design-guidelines). + +## Behavior +Overflow menus are represented by a kebab button, as the user clicks on the kebab, a horizontal list will appear with additional options to click. + +## Content Guidelines +* Text should be short and direct so users can quickly scan and decide on an action. +* Text should be written in sentence case. +* Overflow menus should be placed on the right side of the container. +